5. 修正重复文字bug

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

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

7. 使用!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
7
8
9
#element {
min-height: 20em;
height: 20em;
}
 
/* IE6 无视下面的代码*/
#element[id] {
height: auto;
}
posted on 2009-12-28 17:21  nidilzhang  阅读(269)  评论(0编辑  收藏  举报