Question

我的表单上面有一个错误，显示在

之上

<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>

<form>中的一个表单，divs内有一堆输入......没有什么特别的。

但我在我的字段上进行了javascript验证，将表单错误从display:none;转换为display:block;，这样可以很好地调整容器字段的大小。问题在于有一个页脚（也在div内）不会向下移动。如果我打开IE8开发人员并查看主容器（包装所有内容），它也不会扩展。例如，如果我取消选中主容器宽度样式然后重新检查它，则会修复所有内容。

有没有办法强制IE8在div中的元素变为display：none时“重新调整”div。显示：阻止;

PS。没有有趣的CSS，没有花车，没有绝对的定位，没有任何会导致这个......

表单错误阻止CSS

.form-error {
    color: #EB1F25;
}

页脚块CSS

.footer-wrapper {
    border-top: 1px solid #000000;
    margin: 30px 0 10px 0;
}
.footer-wrapper .links {
    width: 960px;
}

经过一番调查后，似乎容器上的inline-block属性导致了问题。

Answer 1

结束显示问题：inline-block;元素没有调整大小。改为浮动工作。

Answer 2

尝试给包装器提供宽度。记住页脚应该在你的主包装内，同时给出一个高度其他div ... min-height或类似的东西。

.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
  width : 100px;
}

Answer 3

很难说究竟是什么造成了这些问题。但是你可以测试一下我建议你尝试的一些技巧：

如果您的.form-error显示在实际<form ...></form>之前（上方），则尝试在这两个块之间插入<br clear="all"/>标记。如果没有，请将clear:all添加到<form ...>，将width:100%添加到.form-error。

如果没有，请先将position:relative和overflow:hidden添加到.form-error，如果没有帮助，请将其添加到<form...>。

如前所述，如果我们能够看到您的整个代码，尝试将jsbin与您的整个 css 和 html 源代码一起使用会更容易，因为IE非常严格的HTML渲染。

IE8显示：无;显示：块;导致div重叠页脚？

3 个答案: