IE7：文本区域表单中的边距过多

Question

我正在尝试处理我的应用程序中的 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 中文本区域有 100px 左边距。 如果有人有纠正这个问题的提示，非常感谢！

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

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

Answer 1

这看起来像继承的边距错误（与浮动的双边距错误类似但不同）。 textarea 继承了表单周围 div 的边距。 《仓位就是一切》对此进行了更详细的描述。

实际的解决方法是：

• 为文本区域指定 -320px 的负左边距（显然，仅适用于 IE）。
• 将内联元素放置在文本区域之前、字段集内部。 看起来可以将样式设置为display:none，但是元素不能为空。
• 将文本区域包装在 div/span/any-other-tag 中，只要它没有任何提供布局的样式规则（我实际上认为表单或字段集可以修复它，但显然它们没有） 。

Answer 2

太奇怪了。 我实际上在 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>

Answer 3

似乎是 IE 的默认样式

的一个错误。 我的猜测是，IE 在内部使用 float 代码设置字段集样式并触发臭名昭著的 双边距错误。

我只需将包装器

就成功地克服了该错误。 直接在

内部。

Answer 4

另一个（也很糟糕）的解决方案是在 </code> 前面添加 <code> </code>...<br /> 但恕我直言，我可以用干燥的解决方案来对抗肮脏的 IE 错误……如果你愿意的话，以毒攻毒……；）