zoukankan      html  css  js  c++  java
  • 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;}

  • 相关阅读:
    JS—ajax及async和defer的区别
    js-cookie和session
    h5小功能_classList和自定义属性data
    html5-attr和prop
    人工智能与金融
    IBM的人工智能“沃森”首次确诊罕见白血病,只用了10分钟!
    终极复制 人工智能将如何推动社会巨变
    对人工智能问题的提问
    人工智能预测精神病
    人工智能代替工人
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/3663658.html
Copyright © 2011-2022 走看看