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中，textarea的左边距为100px。如果有人有提示要纠正这一点，非常感谢！

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

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

Answer 1

这看起来像是继承的边缘错误（类似但不同于浮点数的双边距错误）。 textarea继承了表单周围div的边距。 Position Is Everything describes it in more detail

实际的解决方法是：

给textarea一个-320px的负左边距（显然只适用于IE）。
在textarea之前放置一个内联元素，但在fieldset中。看起来您可以将样式设置为display：none，但该元素不能为空。
将textarea包装在div / span / any-other-tag中，只要它没有任何给出布局的样式规则（我实际上会认为表单或字段集会修复它，但显然他们不会“T）。

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的＆lt; fieldset＆gt;的默认样式的错误。我的猜测是内部，IE使用float代码设置字段集样式并触发臭名昭着的Double-margin bug。

我设法通过放置一个包装器＆lt; div＆gt;来击败这个bug。直接在＆lt; fieldset＆gt;内。

Answer 4

另一个（也是可怕的）解决方案是在 前面添加<textarea> ... 但恕我直言，我可以用干燥的解决方案来对抗肮脏的IE漏洞...如果你愿意，可以点火......;）

IE7：textarea的形式过多

4 个答案: