ie67下 和textarea父级有水平的margin会产生双边距bug.docx

IE6，IE7表单input/textarea元素双倍继承margin bug（译）时间:2011-11-06 文章来源:本站编辑:admin 点击:次IE6，IE7表单input/textarea元素双倍继承margin bug，影响浏览器版本：IE6，IE7，症状：表单的input 和 textarea 元素的水平margin会“继承”了其容器的margin，而这个容器的属性为hasLayerout 英文原文：Form Control Double Margin Bug 译文：IE6，IE7表单input/textarea元素双倍继承margin bug 影响浏览器版本： IE6，IE7 症状： 表单的input 和 textarea 元素的水平margin会“继承”了其容器的margin，而这个容器的属性为hasLayerout 注：这里的input仅指type=text | button | submit的类型有影响，而对checkbox等是没有影响的。 描述： 这里有另一个bug，我是在Grard Talbots IE7 Bug Collection Page 找到的，Double Margin bug双边距bug在IE7中有新的表现形式，出现对input和textarea元素的影响，让我们看看吧! bug demo: Form Control Double Margin Bug Demo -下午茶-前端html, body background: #fff;color: #000;div.wrap width: 100%; /* gives layout ( /haslayout ) */margin-left: 100px;1122 下午茶 (若代码引用外部js，运行后需刷新一次才能执行) html code： 01. 02. 03. 04. 11 05. 06. 22 07. foo 08. 09. CSS code： 01.div.wrap 02. margin-left: 100px; 03. width: 100%; /* gives layout */ 04. 我们这里给容器设置了has Layout 和 margin-left ，在IE6，IE7中， input 和 textarea 元素看起来好象从容器div.wrap继承了其margin，使得表单元素有双倍的margin， 同样的，如果给容器设置margin-right，也会这样，而在现代的先进的浏览器，如：firefox，IE8，Chrome，input和textarea将会和select元素垂直对齐。 解决方法： 1、用暴力破解：（添加IE6，IE7的条件解释，设置input和textarea负边距，值等于div.wrap的margin） 01. 02. 03. input, 04. textarea 05. margin-left: -100px; 06. 07. 08. 注意的是：这个负margin要用到指定的出现bug的表单元素上， 2、不要给容器设置layout，但这个很难实现 3、在hasLayout容器层内再添加一个无haslayout的div 或者一个有haslayout但无margin的DIV（本人添加的方法） Form Control Double Margin Bug Demo -下午茶-前端html, body background: #fff;color: #000;div.wrap width: 100%; /* gives layout ( /haslayout ) */margin-left: 100px;1122 下午茶 (若代码引用外部js，运行后需刷新一次才能执行) 4、在input , textarea元素前面添加文本或行内inline元素，如： 123 123 123 还要补充的问题： 这里所说的div容器，是指直接包围着input，textarea元素的div，所以，也就有了上面的第三个方法， 也所以，如果存在两个haslayout的div嵌套，最里面包含着input，textarea元素会怎样呢？ 示例：（结果就是：input , textarea只继承了最接近的那个DIV容器的margin值，并不是两个DIV margin值的总和） Form Control Double Margin Bug Demo - 下午茶-前端html, body background: #fff;color: #000;margin:0;div.wrap width: 100%; /* gives layout ( /haslayout ) */margin-left: 100px;background:yellow;div.wrap2width:100%;margin-left:150px;background:orange;1122 下午茶 (若代码引用外部js，运行后需刷新一次才能执行) 这里还保存了一些单页的英文示例说明，就不翻译了，大同小异 IE-inherited-margin-bug-form-elements-and-hasLayout.html 下面的例子中容器不是div，而是用label标签，但是效果一样出现bug: IE6/IE7 block (hasLayout) element / input margin inheritance bug 参考资料： 1、IE6/IE7 form element margin inheritance bug 2、IE inherited margin bug: form elem