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

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，我是在Gérard Talbots IE7 Bug Collection Page 找到的，Double Margin bug双边距bug在IE7中有新的表现形式，出现对input和textarea元素的影响，让我们看看吧!bug demo:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8titleForm Control Double Margin Bug Demo -下午茶-前端/titlestyle type=text/csshtml, body {background: #fff;color: #000;}div.wrap {width: 100%; /* gives layout ( /haslayout ) */margin-left: 100px;}/style/headbodyform action=div class=wrapinput type=text name=berdiv11/divtextarea cols=10 rows=5 name=baz/textareadiv22/divselect name=beroptionfoo/option/selectbr/div/formh2a href= 下午茶/a/h2/body/html (若代码引用外部js，运行后需刷新一次才能执行)html code： 01.form action= 02.div class=wrap 03. input type=text name=ber04. div11/div 05. textarea cols=10 rows=5 name=baz/textarea06. div22/div 07. select name=beroptionfoo/option/selectbr 08./div 09./form 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.!--[if lte IE 7] 02. style type=text/css 03. input, 04. textarea { 05. margin-left: -100px; 06. } 07. /style 08.![endif]-- 注意的是：这个负margin要用到指定的出现bug的表单元素上，2、不要给容器设置layout，但这个很难实现3、在hasLayout