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


    问题描述:

    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;}

  • 相关阅读:
    webform文件上传加水印
    2017-6-6 ASP.NET Ajax版页面无刷新三级联动
    2017-6-5 Ajax应用
    转【 正则表达式】
    2017-6-4 JQuery中的选择器和动画 弹窗遮罩
    Linq 组合分页查询
    2017-6-2 Linq高级查询和函数
    2017-6-3 JQuery中的Dom操作和事件
    WebForm母版页
    WebForm内置对象:Application和ViewState、Repeater的Command用法
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/3663658.html
Copyright © 2020-2023  润新知