Jan
09
在开发过程中，新排的版面在 IE 浏览器中出现到了一个很奇特的现象，搞的我愣了好一会，后来才弄明白是怎么一回事，其实很早之前就在老外博客里看过这个 BUG 的表现，但一直没碰到过，今天算是逮了个正着。
做个示例重现一下 BUG，无论你是否已经知道这个 BUG，请与我一起瞻仰伟大的 IE6,IE7 之风采~~~
效果（IE浏览器中必有惊喜）
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/><html xmlns="http://www.w3.org/1999/xhtml"> <br/><head> <br/><title>iebug</title> <br/><style> <br/>.iebug{margin-left:80px;padding:10px 0;background:#ddd;width:400px;font:12px/1.8 arial;}<br/>.iebug .text{border:1px solid #999;margin:2px 0;}<br/></style> <br/></head> <br/><br/><div class="iebug"><input type="radio" /> 单选框不继承边距<br /><br/><input type="checkbox" /> 复选框也不继承边距<br /><br/><input type="text" class="text" /> 文本框继承边距<br/><br/><br/><textarea rows="3" cols="30" class="text">textarea继承边距</textarea><br/></div><br/><br/>
牛B的hasLayout
这里给 div 设置了左边距为80px，宽度是400px，重点在这里，width 的设定给这个 div 加上了 hasLayout 属性，导致IE浏览器错误的给 div 内部的文本框继承了这一左边距。不一定要用 width 来触发 hasLayout，height、zoom 等都可以引发问题。奇怪的是同是 input 标签，单复选框就没这种待遇，囧~~~
解决方法：
这个 bug 的产生貌似只发生在 input 元素的包含父容器有 haslayout 属性，和外边距 margin （同文字对齐方向）值的情况下。这就产生了几种可能的解决方案：
1.给 input 元素设置一个绝对值等于所有父元素 margin 的负值，这是最傻最白痴的办法，不推荐。
2.删除所有的父元素的 margin 值，给父元素分配这个特性也许有原因，不理想
3.将父元素的 hasLayout 属性。给父元素分配这个特性也许有原因，这个方法也不理想
4.使用行文本元素，内联元素放在在 input 元素前边。
5.将 Input 元素用任何一个没有 hasLayout 样式的包含元素，示例：
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/><html xmlns="http://www.w3.org/1999/xhtml"> <br/><head> <br/><title>iebug</title> <br/><style> <br/>.iebug{margin-left:80px;padding:10px 0;background:#ddd;width:400px;font:12px/1.8 arial;}<br/>.iebug .text{border:1px solid #999;margin:2px 0;}<br/></style> <br/></head> <br/><br/><div class="iebug"><input type="radio" /> 单选框不继承边距<br /><br/><input type="checkbox" /> 复选框也不继承边距<br /><br/><div><input type="text" class="text" /> 偷懒，用div包含下，解决</div><br/><br/><textarea rows="3" cols="30" class="text">textarea继承边距</textarea><br/></div><br/><br/>
以前搞评论表单的时候就是这个input的位置控制让让我琢磨不透，不得以使用table或者div给每个input包住再控制 – -
IE总让人头疼啊！！！