6

我正在尝试处理我的应用程序中的 IE7 错误。这是 HTML/CSS 代码

<div style="margin-left: 320px">
    <form method="post" action=""><fieldset>
        <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
                  style="margin: 0; padding: 0"></textarea>
    </fieldset></form>
</div>

在 Firefox/Opera/Webkit/IE6 中没问题，但在 IE7 中，textarea 有 100px 的左边距。如果有人有提示来纠正这个问题，非常感谢！

这是显示此示例 HTML 的 IE7 屏幕截图：

http://daneel.net/pub/img/ie7_bug_decalage.jpg

4

4 回答 4

7

这看起来像继承的边距错误（类似于但不同于带有浮动的双边距错误）。textarea 继承了表单周围 div 的边距。Position Is Everything 更详细地描述了它。

实际的解决方法是：

  • 给 textarea 一个负的左边距 -320px （显然，仅适用于 IE）。
  • 在文本区域之前放置一个内联元素，但在字段集中。看起来您可以将样式设置为 display:none，但元素不能为空。
  • 将 textarea 包装在 div/span/any-other-tag 中，只要它没有任何为其提供布局的样式规则（我实际上会认为表单或字段集会修复它，但显然他们没有） .
于 2009-02-09T16:52:12.420 回答
4

完全奇怪。我实际上在 ie7 中得到了 320px（=父 div 边距）。

您可以只用 ie7 负边距覆盖，但这太糟糕了......

编辑： 好的，我不知道这为什么有效，但它有效。这绝对是一个错误：

<div style="margin-left: 320px; display:inline-block;">
    <form method="post" action=""><fieldset>
        <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
                  style="margin: 0; padding: 0"></textarea>
    </fieldset></form>
</div>
于 2009-02-09T11:10:56.357 回答
3

似乎是 IE 对 <fieldset> 的默认样式的错误。我的猜测是，在内部，IE 正在使用float代码设置字段集的样式并触发臭名昭著的Double-margin bug。

我设法通过将包装器 <div> 直接放在 <fieldset> 中来解决这个错误。

于 2009-02-09T15:09:30.777 回答
3

另一个（也很糟糕）的解决方案是&nbsp;在前面添加<textarea>...但是恕我直言，我可以用干涩的解决方案来对抗肮脏的 IE 错误...如果你愿意的话... ;)

于 2011-09-02T10:39:50.877 回答