IE CSS Bug系列：表单控件双边距BUG

受影响版本该BUG影响：IE7、IE6表现<input>和<textarea>元素会从用拥有边距（margin）属性和布局的父节点继承水平方向的边距（margin）属性。教程日期2009-08-17 22:37:49 星期一描述这是我在Gérard Talbot 的 IE7 BUG 集合页上发现的另外一个BUG。 双边距 Bug现在有了新的表现，而且在IE7下也出现了。现在它主要的表现是影响了<input>和<textarea>元素。让我们来看一下示例。示例示例在一个单独页面上。 注意：虽然该演示显示了合法的HTML标记，但它并不是创建HTML表单的合适方法，本演示只是一个简化的版本。 HTML 代码：

1. <form action="">
2. <div>
3.     <input type="text" name="ber">
4.     <textarea cols="10" rows="5" name="baz"></textarea>
5.     <select name="ber"><option>foo</option></select>
6. </div>
7. </form>

CSS 代码：

1. div {
2.     margin-left: 100px;
3.     width: 100%; /* gives "layout" */
4. }

现在，我们有一个拥有布局并且设置了margin-left属性的父节点。在IE6与IE7中，<input> 和<textarea>元素的表现看起来就好像它们从父节点<div>那里继承了margin属性一样，这样它们的margin 属性的值就是双重叠加的。在父节点上设置margin-right属性结果也是一样的。在功能更健全的浏览器中，<input> 和<textarea>元素在垂直方向上应该和<select>对齐。  

解决方案

下面是按照解决方案类型排序的对上述问题的解决方案。 解决方案(条件注释解决方案)解决方案日期2009-08-17 22:37:49 星期一修复版本所有受影响版本描述对于本BUG的修复是一个相当暴力直接的解决方案。让我们一起看一下： 修复后的实例在一个单独页面上。 HTML 代码:

1. <form action="">
2. <div>
3.     <input type="text" name="ber">
4.     <textarea cols="10" rows="5" name="baz"></textarea>
5.     <select name="ber"><option>foo</option></select>
6. </div>
7. </form>

CSS 代码:

1. div {
2.     margin-left: 100px;
3.     width: 100%; /* gives "layout" */
4. }

条件注释代码：

1. <!--[if lte IE 7]>
2.     <style type="text/css">
3.         input,
4.         textarea {
5.             margin-left: -100px;
6.         }
7.     </style>
8. <![endif]-->

让我们来分解一下我在这里的解决办法。这个是迄今为止我发现的唯一一个解决方案。我通过使用条件注释来针对IE6和IE7做了处理，您也可以选择任 何您喜欢的方式来达成这个目标。对于这些特定版本的IE浏览器，我为<input>和<textarea>设置了与父节点中的 margin-left属性值大小相等，符号相反的margin-left值。现在，在受该BUG影响浏览器中，所有的元素都像他们应该表现的那样， 与<select>元素在垂直方向对齐。该方案对于margin-right来说同样适用。 注释：你可以直接使用我在CSS里定义的选择条件，这不算恶意侵权。要确保修正其中margin的负数，把它只应用到和这个bug相关的表单元素中。 原文链接：http://haslayout.net/css/Form-Control-Double-Margin-Bug

标签：网页前端