IE6在HTML标准下出现的bug小技巧

  在IE8发布不久之后,Opera首席执行官Jon von Tetzchner曾经对外公开表示,微软的IE8浏览器还会对网络标准继续破坏。不过随着大家对IE8浏览器越来越了解,发现IE8对CSS标准的支持的确有非常大的改观。

  微软的IE8已采纳了万维网联合会的HTML 5和CSS2.1标准,只是还没有采用已使用于Mozilla,谷歌,和Opera浏览器的SVG。多年来面对W3C机构对HTML标准的开发停滞不前,微软便以自己的IE浏览器引擎建立了自己的网络标准。随着各大浏览器的快速发展,同时也推动了HTML标准向前发展。

  从而使得IE浏览器独立开发这些标准属性跟HTML 5标准不太相符,这就扭曲了浏览器市场,迫使网站设计者建立的网页需要同时兼容于IE6,IE7,IE8和其他的浏览器。

  既然外界的环境是WEB开发者无法改变的事情,那么我们只有加强自身的技能来适应目前的情况,不能寄希望与IE8的普及,这是一件很不靠谱的事情,顽固的IE6用户未必会接受IE8。

  所以我们最近一年半载还是不能无视IE6。在设计网页的时候我们也只有花更多时间来用于制作IE6的兼容性。这里我们总结了8个使用有效的HTML 和CSS代码来修正网页在IE6下显示错位情况的解决方法。

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

  为浮动元素的最后一个条目使用一个条件注释,比如:

  <!–[if !IE]>Put your commentary in here…<![endif]–>        
        

it知识库IE6在HTML标准下出现的bug小技巧,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。