E6 BUG诡异的行内替换元素设置浮动并设置text-indent:xx px 影响相邻元素布局
一个奇怪的现象:一个DIV里面有两个各元素,一个元素右浮动,浮动的元素设置了个text-indent,而另外一个元素却仅在IE6下产生了和该元素一样大小的类padding-left间距值。
发现原型:
<input type="button" value="搜索" /> <a href="#">啊啊啊啊</a></div> <span style="color: #ff0000;">在input标签中设置text-indent:20px后,会发现 a标签 在IE6中会出现一个类似左padding值等于20px。</span>
经过一系列测试发现问题产生的条件:
1、 一个内联替代元素【input,img等】和一个内联元素【含内联可替换和内联不可替换元素】相邻
2、 内联可替代元素浮动,内联元素不浮动
3、 内联可替代元素设置 text-align: xx px;
导致的结果:内联元素出现类似padding-left:xx px 的左距离 其中xx 等于 内联可替代元素的text-indent数值。
已知解决方式:
1、 将内联元素也设置浮动
2、 后一元素使用绝对定位
3、 用padding-left替代text-align
未知求解:未知其产生BUG的原理从而找出根本的解决方式,上述解决方式个人觉得较为牵强。
以上探究纯属个人测试个人观点,如有不对欢迎指正。
转载请注明:cocss » IE6 BUG诡异的行内替换元素设置浮动并设置text-indent:xx px 影响相邻元素布局