IE7：textarea表单中的余量过大

问题描述：

我正试图处理我的应用程序中的IE7错误。下面是HTML/CSS代码IE7：textarea表单中的余量过大

<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 /歌剧/ WebKit的/ IE6它是好的，但在IE7 textarea的有100px的左边距。如果有人有一个小费纠正这一点，非常感谢！

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

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

你使用什么DOCTYPE？ – mbillard 2009-02-09 17:02:10

答

共怪异。我实际上在ie7中获得了320px（=父div边距）。

您可以用IE7只覆盖切缘阴性，但是这太可怕了......

编辑： OK，我不知道为什么这个工作，但它的工作原理。这是defintely了一个错误：

<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>

你可能想把一些重点放在**显示上：inline-block; ** – mbillard 2009-02-09 17:01:04

答

似乎与IE浏览器的默认样式的<字段集的错误>。我的猜测是，在内部，IE使用float代码对字段集进行风格设置，并触发臭名昭着的Double-margin bug。

我设法击败错误，只需将< div>直接放在< fieldset>内。

答

这看起来像继承的保证金错误（类似但不同于浮动的双重保证金错误）。 textarea继承了窗体周围div的边距。 Position Is Everything describes it in more detail。

实际解决方法是：

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

答

另外，（也是可怕的）解决方案是添加 只是在<textarea>面前...... 但恕我直言，我行与drity解决方案...以毒攻毒如果战斗脏IE浏览器漏洞你会......;）

我最终扩展了一点：，这是一个简单的修复，只是显示了困在XP上的可怜灵魂的空间。 – Jake1164 2013-09-18 12:28:07

IE7：textarea表单中的余量过大

相关推荐