IE7:textarea的形式过多

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更详细地描述它.

实际的解决方法是:

• 给textarea一个-320px的负左边距(显然只适用于IE).
• 在textarea之前放置一个内联元素,但在fieldset中.看起来您可以将样式设置为display:none,但该元素不能为空.
• 将textarea包装在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>