场景：

昨天在书写css的时候,需要在opera下设置元素的padding属性，于是这样书写: 
@media all and (min-width: 0px){ /*处理opera下间隔较小的问题*/ 
#main .left .middle img { 
padding-top:2px; 
} 
} 
但在safair(3.1)下浏览发现此设置也起作用，我又加上如下代码： 
#main .left .middle img:empty { /*因@media all and (min-width: 0px),此处将间隔设为0*/ 
padding-top:0px!important; /*针对safair*/ 
} 


问题： 

问题解决了。实际页面制作中，我们通常需要去写这些去解决浏览器兼容问题，毫无疑问这样很直接，很有效， 
但这样也将带来以下问题： 
1.加深了css代码的复杂度,这时候注释一定要写清楚。 
2.随之而来的是维护问题，若有些显示需要更改，那么我们不得又去测试。 
3.随着浏览器的升级，这些代码有可能显示不准确或者失效。 


建议： 

尽管如此，有时候我们不得不去写这样的代码去处理一些显示差异，我们只能期待主流浏览器厂商能够早日遵循w3c标准。 
下面是我的一些看法： 

1.代码注释一定要写清楚，要不就是垃圾一堆（除非那些用于商业目的）。 
2.html代码书写非常重要，当我们欲通过书写css代码来处理显示统一的时候，要想想是否是html代码布局 或者是 元素运用不恰当造成的。 
3.在css中，如果有过多的.font ,.left这样的样式出现的时候，一定要检查页面的html代码（通常都是由于html代码书写不规范，元素间关联性不强造成的）。 
4.css命名一定要规范 见名知意，杜绝诸如aa ,bb这样的变量出现。 

以上几点只是在实际制作中基本且常见的问题，真正需要注意的还很多，博客园上有一位大师光font set 就讲了3篇还没讲完，大家感兴趣可以去看看（http://www.cnblogs.com/ruxpinsp1）。 


资料： 

下面附上常用的CSS Hack供大家参考： 
/*from:http://www.2008red.com/member_pic_433/files/wei_er/html/article_5707_1.shtml*/ 

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前, 
我们只能用这样的方法来完成这样的任务. 

我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), 
Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11). 

在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一. 

IE系列: 
selector { +property:value; } 在属性名前加上加号"+",这个Hack只有IE系列可以识别. 
selector { *property:value; } 在属性名前加上星号"*",这个Hack只有IE系列可以识别. 
selector { _property:value; } 在属性名前加上下划线"_",这个Hack只有IE系列 (除IE7外) 识别. 
* html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别. 
html/**/ >body selector { property:value; } 
在选择器上运用继承法 html/**/ >body selector ,这个Hack只有IE系列 (除IE7外) 可以识别. 

selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用. 
selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释, 

屏蔽IE5和IE6用 (不屏蔽IE5.5) . 
select/**/ { property:value; } 在选择器和花括号"{"之间加入注释,屏蔽IE5用. 
*+html selector { property:value !important; } 在选择器上运用继承法 *+html selector 再加上 !important, 
这个Hack只有IE7可以识别. 

Firefox: 
*:lang(lang) selector { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话, 
目前只有Firefox可以识别. 

Safari: 
selector:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别. 

Opera: 
@media all and (min-width: 0px){ selector { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别. 

以上的Hack并不完整,大家一起补充. 

对Hack的运用,最普遍的是CSS盒模型Hack,清除浮动Hack. 
CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X: 

selctor { width:IE5.X宽度; voice-family :""}""; voice-family:inherit; width:正确宽度; } 
清除浮动Hack,相信这个定义用的人很多: 

selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }