转发下，同事总结的。
浏览器大战的结果曾经一度是IE一统天下，在那个时代，我们根本不用担心浏览器兼容性问题，用PS自动生成代码都行。然而伴随时代发展，人们对WEB应用的期望越来越高，于是乎，江湖烽烟再起，各种浏览器如雨后春笋，这可苦了我们这些开发者，为了让各浏览器表现一致，不知道有多少前辈耗费了多少心血，现在，让我们踩在前辈的肩膀上继续去奋斗吧。
日常工作我们经常需要区分Firefox和IE系列浏览器，这里有一个使用的快速方法：
background:blue;
/* Firefox */
background:red \9; /* IE8（只有IE系列浏览器认识\9）
*/
*background:black; /* IE7（IE6/IE7认识星星）*/
_background:orange; /* IE6
（IE6认识下划线） */
测试地址：
http://webtech.intra.sina.com.cn/?page_id=39
如果想更深入的研究，那么这里有更多的例子：
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
以上都是前辈实践摸索出来的hack方式，用以区分不同浏览器，不过呢，当今世界的浏览器主要分为四大内核：
渲染引擎
浏览器
Trident
Internet Explorer
Gecko
Mozilla Firefox
WebKit
Safari、google Chrome
Presto
Opera
官方的文档都有说明，可以使用前缀
来实现各引擎的私有属性：
-o-:以Presto为渲染引擎的浏览Opera的私有属性、
-moz-:以Gecko为渲染引擎的浏览器Mozilla Firefox的私有属性
-webkit-:以Webkit为渲染引擎的浏览器Safari、Google Chrome的私有属性
IE8开始引入-ms-前缀用以区分私有属性的方式，详见：
https://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
另外IE还可以通过条件注释来加以区分，详见：
http://www.quirksmode.org/css/condcom.html
http://msdn.microsoft.com/en-u
转自http://www.w3cn.org/article/tips/2005/105.html
我们先来看一个菜单的例子，最终效果是:
第一步：建立一个无序列表
我们先建立一个无序列表，来建立菜单的结构。代码是：
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li> ......
