深山老林

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://forest.blogbus.com/logs/1771860.html

leftjustfied.net 给出了一篇介绍如何使 CSS 正常工作，节省你调试时间的文章：CSS Negotiation and a Sanity Saving Shortcut，其中的一些方法值得推荐。加上《CSS的十八般技巧》中提到的一些方法，我做了一下整理：

首先，考虑到大量问题源自不同浏览器下默认的 margin 和 padding 的设置不同，作者建议干脆先把所有的 margin/padding 清零：

----------------------------------
* {
  padding:0;
  margin:0;
}
----------------------------------

第二，给 IE 设置特殊的样式表：

导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

----------------------------------
@import url("main.css");
----------------------------------

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

----------------------------------
@import "main.css";
----------------------------------

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
----------------------------------
html>body p {
/* 定义内容 */
}
----------------------------------

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

----------------------------------
* html p {
/* declarations */
}
----------------------------------

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：

----------------------------------
/* \*/
* html p {
declarations
}
/* */
----------------------------------

2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

----------------------------------
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
----------------------------------

或者在 CSS 中使用 Tantek 发明的 band pass filter:

--------------------------------------------------------
/* IE5 */
@media tty {
i{content:"";/*" "*/}};
@import 'ie5.css'; {;}/*";}
}/* */
/* IE 5.5 */
@media tty {
i{content:"";/*" "*/}}@m;
@import 'ie55.css'; /*";}
}/* */