CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在52CSS.com大量的技术文档中，也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助，如果您依然有疑问，欢迎您到52CSS.com查阅、搜索相关内容。
一、 针对浏览器的选择器
这些选择器在你需要针对某款浏览器进行css设计时将非常有用。
| IE6及其更低版本 * html {} IE7及其更低版本 *:first-child+html {} * html {} 仅针对IE7 *:first-child+html {} IE7和当代浏览器 html>body{} 仅当代浏览器(IE7不适用) html>/**/body{} Opera9及其更低版本 html:first-child {} Safari html[xmlns*=""] body:last-child {} |
要使用这些选择器,请将它们放在样式之前. 例如:
| #content-box { width: 300px; height: 150px; } |
| * html #content-box { width: 250px; } |
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。
IE6以下
| *html{} |
IE 7 以下
| *:first-child+html {} * html {} |
只对IE 7
| *:first-child+html {} |
只对IE 7 和现代浏览器
| html>body {} |
只对现代浏览器(非IE 7)
| html>/**/body {} |
最新的Opera 9以下版本
| html:first-child {} |
Safari
| html[xmlns*=”"] body:last-child {} |
要使用这些选择器，请在样式前写下这些代码。例如：
| #content-box { width: 300px; height: 150px; } * html #content-box { width: 250px; } /* 重写上面的代码并且把宽度改为250PX 在IE6以下版本中适用。 */ |
