IE6 BUG诡异的行内替换元素设置浮动并设置text-indent：xx px 影响相邻元素布局

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 影响相邻元素布局