亲品藏
^
只需几招,你就能轻松搞定IE6

        很多人都觉得对于IE浏览器,我们只会使用不会修复。它一出问题,大多人只会采取一个绝招,那就是换个浏览器。换个浏览器可以一时的解决问题,但不能永久的解决问题。现在小编就教你10个技巧,让你轻松掌控iE6,成为使用IE的高手。

只需几招,你就能轻松搞定IE6
IE6

  1. 使用 DOCTYPE。

  你需要在HTML页面的最顶部加上DOCTYPE类型,当然,strict版是值得推荐的,例如:《!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3/TR/html4/strict.dtd”》或者, XHTML页面的!DOCTYPE:《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd”》。

  你最不想看到的是,IE6进入怪癖模式 - 其实已经够多怪癖了。

  2. 设置position: relative。

  设置position:relative解决了不止一个问题,特别当需要设置对齐的时候。很明显,你需要明白的一点是,绝对定位是相对来说的。说不定,因为你没有设置,而不知道东西都飞到那去了。比如,你设计了每篇文章前都有一张图片,最后,你发现,只有一张图片在页面上,或许,是他们重叠了。

  3. 给浮动元素设置 display:inline 值。

  这源于著名的IE6双倍外边距BUG,例如,你给一个DIV设计了浮动,并且,设置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,这里,给浮动元素设置 display:inline;,即可解决问题。

  4. 为元素设置 hasLayout。

  很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决。

  最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。设置一个具体的值是推荐的,但有时候并不一定知道高度多少,这里,你可能会用到height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。

  5. 解决字符重复出现的问题。

  复杂的布局可能导致一些浮动元素里面的文字,出现在清理浮动位置的下面。这是一个奇怪的问题,下面这此可以帮你解决:

  确保浮动元素设置了 display:inline;

  在浮动元素中使用 margin-right:-3px;

  在浮动元素的最后一个元素后加上一个IE注释,例如: 《!--[if !IE]》把你的注释放这里… 《![endif]–》

  在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)

  UPDATE: 最简单的方法是删除掉所有注释。

  你可以到positioniseverything中查看更多关于这个的解释。

  6.只在《a》标签中使用hover,IE6只支持《a》标签显示hover样式。

  当然,你还是可以通过JS来解决这个方法。但是, 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。

  7. 使用!important 或高级选择器来区分IE浏览器。

  比如min-height可以避免使用CSS来实现对IE的兼容。

  #element { min-height: 20em; height: auto !important; height: 20em; /* 让IE6显示这个高度 */ }

  IE6 并不能正确地识别min-height,可以设置固定的高度,让IE6解板为20em。即使如此,它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器:

  #element { min-height: 20em; height: 20em; } /* 忽略 IE6 */ #element[id] { height: auto; }

  8. 避免按比例确定的尺寸。

  比例会让IE6变得错乱,除非你给父元素添加一个确切的高度。不然,给其他的加上!important,例如:

  body{ margin: 2% 0 !important; margin: 20px 0; /* IE6 可读 */ }

  9. 尽早测试,经常测试。

  别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。(至少我自己深有体会)

  10. 重构你的代码。

  很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2两。我想,如果是想解决方法,或许2天都搞不定。

  很多的代码大家可能看不懂,不要担心只要按照小编教你的方法一步步来,你就可以轻松的搞定,你最不懂的抽象浏览器语言。有了以上的10招,你要怎么使用iE6都行啦!

相关阅读

CopyRight 亲品藏移动版(m.qinpinchang.com)