0

我有一个表格，上面出现错误，看起来像

<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 开发人员并查看主容器（包含所有内容），它也不会扩展。例如，如果我取消选中主容器宽度样式，然后重新选中它，它会修复所有问题。

当 div 内的元素从 display:none 变为时，是否有办法强制 IE8“调整”其 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容器上的属性导致了问题。

4

3 回答 3

1

最终成为 display:inline-block; 的问题。元素未调整大小。改为浮动有效。

于 2012-09-08T02:59:35.663 回答
0

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

.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
  width : 100px;
}
于 2012-09-07T14:33:59.817 回答
0

很难说到底是什么造成了问题。但是您可以测试一些我建议您尝试的技巧：

如果您.form-error出现在实际之前（上方）<form ...></form>，请尝试<br clear="all"/>在这两个块之间插入标签。如果没有，添加clear:allto<form ...>和width:100%to .form-error。

如果没有，请将position:relativeand overflow:hiddenfirst 添加到.form-error，如果没有帮助，也将其添加到<form...>。

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

于 2012-09-07T14:44:05.150 回答