我似乎遇到了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上重现这个,但我有截图。
有什么想法吗?
答案 0 :(得分:0)
为了解决这个问题,我创建了另一个包含第一个隐藏行的div。我给它的背景是背景div的大小和颜色。这样它就会与错误的边界重叠。