• [转]IE6的bug的8个技巧


    1. 设置position: relative

    将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。

    2.将浮动元素设置为display:inline

    具有margin属性的浮动元素可能引起的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,当然,方法也不是只有这一个。

    3. 将一个元素设置为hasLayout

    很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素,或者是应用透明效果。

    最简单的设置hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。我们推荐设置实 际尺寸,但是问题是这是不现实的,你可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候 hasLayout已经被启用。

    4. 修正重复文字bug

    复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:

    • 确保所有的元素使用”display:inline;”
    • 在最后一个元素上使用一个”margin-right:-3px;”
    • 为浮动元素的最后一个条目使用一个条件注释,比如:
      1
      <!--[if !IE]>Put your commentary in here...<![endif]-->
    • 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

    5. 使用!important 或高级选择器来区分IE6

    不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:

    1
    2
    3
    4
    5
    #element {
     min-height: 20em;
     height: auto !important; /* 所有浏览器都理解这段代码 */
     height: 20em; /* IE6 错误的使用这个值 /*
    }

    IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。

    另外一个可选的方法是使用高级选择器,比如e.g.

    1
    2
    3
    4
    5
    6
    #element {
     min-height: 20em;
    height: auto !important; 
    height: 20em;
    overflow: visible;
    }

    6. 避免百分比单位

    百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小,才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比,比如:

    1
    2
    3
    4
    body {
     margin: 2% 0 !important;
     margin: 20px 0; /* IE6 only */
    }

    7. 尽早测试并不断测试

    不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕,而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行,那么一般在其它浏览器就不会有问题。

    8. 重构你的代码

    经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码,但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

    虽然IE8并没有从根本上改变IE,但是它对CSS标准的支持的确有非常大的改观。但是即便如此,我们依然不能寄希望与IE8的普及,这是一件很不靠谱的事情,顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。

  • 相关阅读:
    JavaScript 选取 min 到 max 之间的 length 个数字并排序
    css BFC
    css 清除浮动
    css hasLayout——IE浏览器css bug的一大罪恶根源
    css hack
    HTML React
    JavaScript 封装一些常用的函数
    dsoframer.ocx在win7下没法用
    DSO Framer ActiveX 控件
    c#读写txt文件
  • 原文地址:https://www.cnblogs.com/lavenderzh/p/1742687.html
Copyright © 2020-2023  润新知