html - Chrome boxshadow 和 border 冲突

Question

我似乎在使用 Chrome 而不是 FF 或 IE 时遇到了问题。如果我有一个 div

<div id = "someDiv">
  <input name = "row1" type = "radio" value = "Y">Y
  <input name = "row1" type = "radio" value = "N">N
  <div id = "hiddenRow1"></div>
  <div id = "hiddenRow2"></div>
</div>

像这样的 CSS

#someDiv {
width: 600px;
padding-top: 3%;
background-color: rgba(24, 25, 27, 0.98);
-webkit-box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.28);
-moz-box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.28);
box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.28);
border: 1px solid #8D3232;
}

.hiddenRow1, .hiddenRow2 {
  display:none;
}

然后我们像这样做一些 jquery

$('input[name="row1"]').on('change', function(){
        var yesno = $(this).val();
        if (yesno == "Y"){
            $('#hiddenRow1').slideDown(500);
            $('#hiddenRow2').slideUp(500);
        }else{
            $('#hiddenRow1').slideUp(500);
            $('#hiddenRow2').slideDown(500);

        }
    });

我遇到了这个非常烦人的错误，当隐藏的行向下滑动并扩展其父 div 的高度时，父 div 的原始边框会保留在屏幕上，直到窗口大小调整或任何 CSS 效果被更改(基本上页面是一些如何重新渲染)。

我能解决这个问题的唯一方法是购买删除主 div 的框阴影，但我不想破坏网站的样式。我无法在 jsfiddle 上重现此内容，但我确实有截图。

有什么想法吗？

http://i.imgur.com/ZCrvSNd.png

Answer 1

为了解决这个问题，我制作了另一个包含第一个隐藏行的 div。我给它设置了背景 div 的大小和颜色。这样它就与 buggy 边界重叠了。