问题描述:
ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度。
实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度同其它浏览器不同,即定义的高度始终会显示成height:14px 。
问题代码如下:
.demo{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{200px;height:6px; background:#f00 url(images/demo.jpg) no-repeat center bottom;_overflow:hidden;*font-size:0;}
实际上可以不加overflow:hidden;只须针对ie6加hack处理下就可解决了,代码如下:
.demo{200px;height:6px; background:#f00 url(images/demo.jpg) no-repeat center bottom;_font-size:0;}