IE6 行内定义成块元素后高度失效

问题描述：

ie6下，空标签块元素height定义失效，表现为除设置的height值外还会显示N像素额外的高度。

实际运用中，若标签为空且定义了小于14px的高度,再加入一背景图的话，会发现该元素高度同其它浏览器不同，即定义的高度始终会显示成height:14px 。

问题代码如下：

.demo{width:200px;height:6px; background:#f00 url(images/demo.jpg) no-repeat center bottom;}

<div class="demo"></div>

查阅网上资料，大都说ie6空标签的块元素会有个最低限度的高，其值为大于20px左右,当height设置成小于这个值时，这个值会无效。解决方法是给该元素加overflow:hidden。

经测试，加overflow属性后该空标签的块元素能通过设置height属性来控制元素的高度，但会导致ie6,ie7浏览器下，该元素的背景图显示不全。

个人认为，究其原因是因为加了overflow:hidden属性该空标签块状元素实现高还是14px，只是设overflow:hidden会把超高的部分截掉了而已，所以才会有该元素的背景图显示不全的怪现象出现！

解决方法是为该元素加font-size:0 hack处理下。

为了更形象的说明这个是针对浏览器的hack处理，改进后的样式代码如下：

.demo{width:200px;height:6px; background:#f00 url(images/demo.jpg) no-repeat center bottom;_overflow:hidden;*font-size:0;}

  实际上可以不加overflow:hidden;只须针对ie6加hack处理下就可解决了，代码如下：

.demo{width:200px;height:6px; background:#f00 url(images/demo.jpg) no-repeat center bottom;_font-size:0;}

转载于:https://www.cnblogs.com/hutuzhu/p/3663658.html