如何为Mozilla，Chrome和IE编写特定的CSS
你可以使用什么CSS条件语句来包含IE，Mozilla，Chrome的特定CSS。
If IE #container { top: 5px; } If Mozilla #container { top: 7px; } If Chrome #container { top: 9px; } 什么是各自的“如果”？
为了那个原因
- 您可以扫描用户代理并找出哪个浏览器，其版本。 包括操作系统特定样式的操作系统
- 您可以为特定的浏览器使用各种CSS黑客
- 或脚本或插件来识别浏览器，并将各种类应用到元素
使用PHP
看到
- http://php.net/manual/en/function.get-browser.php
- http://techpatterns.com/downloads/php-browser-detection-basic.php
- http://techpatterns.com/downloads/php_browser_detection.php （也包含JS）
然后根据检测到的浏览器创builddynamicCSS文件
这是一个CSS黑客名单
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */
资料来源： http : //paulirish.com/2009/browser-specific-css-hacks/
如果你想使用插件，那么这里是一个
你可以使用PHP来回显浏览器名称作为一个body类，例如
<body class="mozilla">
那么，你的条件CSS看起来像
.ie #container { top: 5px;} .mozilla #container { top: 5px;} .chrome #container { top: 5px;}
你可以在你的css文件中使用这个代码：
-webkit-top:9px; -moz-top:7px; top:5px;
代码-webkit-top：9px; 是铬，-moz-top：7px是Mozilla，最后一个是IE。 玩的开心！！！
对于干净的代码，你可以在这里使用JavaScript文件： http : //rafael.adm.br/css_browser_selector/通过包括行：
<script src="css_browser_selector.js" type="text/javascript"></script>
您可以使用以下简单模式编写后续的CSS：
.ie7 [thing] { background-color: orange } .chrome [thing] { background-color: gray }
保罗爱尔兰的IE浏览器特定的CSS的方法是我见过的最优雅的。 它使用条件语句向HTML元素添加类，然后可以使用条件语句来应用适当的IE版本特定的CSS，而不用求助于黑客。 CSSvalidation，并将继续为未来的浏览器版本下线。
该方法的全部细节可以在他的网站上看到。
这不包括Mozilla和Chrome的浏览器特定的黑客攻击，但我真的不觉得我需要这些。
既然你在标签中也有PHP，我会build议一些服务器端的选项。
最简单的解决scheme是大多数人在这里build议的。 我一般用这个问题的原因是，它会导致你的CSS文件或者<style>标签达到你html文档的20倍，并且会导致浏览器速度慢，无法理解它的parsing和处理标签-moz-border-radius vs -webkit-border-radius
第二个最好的解决scheme（我发现）是让PHP输出你的实际的CSS文件即
<link rel="stylesheet" type="text/css" href="mycss.php">
哪里
<？PHP
标题（“Content-Type：text / css”）;
if（preg_match（“/ chrome /”，$ _SERVER ['HTTP_USER_AGENT']））{
//输出铬特定的CSS样式
} else {
//输出默认的css风格
}
？>
这使您可以更轻松地为浏览器处理文件。
我发现的最好的方法是Apache特有的。 该方法是使用mod_rewrite或mod_perl的PerlMapToStorageHandler将URL重映射到基于渲染引擎的系统上的文件。
说你的网站是http://www.myexample.com/ ，它指向/srv/www/html 。 对于chrome，如果你问main.css，而不是加载/srv/www/html/main.css它检查是否有/srv/www/html/main.webkit.css ，如果它存在，它转储，否则它会输出main.css。 对于IE，它会尝试main.trident.css ，对于Firefox来说，它会尝试main.gecko.css 。 像上面那样，它允许我创build更小，更有针对性的css文件，但是它也允许我更好地使用caching，因为浏览器将尝试重新下载文件，并且web服务器将向浏览器呈现适当的304以告诉它，你不需要重新下载它。 这也让我的网站开发者有了更多的自由，而不必为后台代码编写目标平台。 我也有.js文件被redirect到JavaScript引擎，为main.js ，在chrome它尝试main.v8.js ，在safari， main.nitro.js ，在firefox， main.gecko.js 。 这允许输出特定的JavaScript，这将更快（less浏览器testing代码/functiontesting）。 授予开发人员不必具体的目标，并可以写一个main.js而不是main.<js engine>.js ，它会正常加载。 即有一个main.js和一个main.jscript.js文件意味着IE获取jscript之一，其他人都得到默认的js，与css文件一样。
使用代理检测器，然后用你的web语言创build程序来创buildcss
例如在Python中
csscreator() useragent = detector() if useragent == "Firefox": css = "your css" ... return css
看看这个链接： http : //webdesignerwall.com/tutorials/css-specific-for-internet-explorer
2特定于资源pipe理器的CSS规则（IE CSS hacks）
另一种select是声明只能由资源pipe理器读取的CSS规则。 例如，在CSS属性将以IE7为目标之前添加一个星号（*），或者在该属性将以IE6为目标之前添加一个下划线。 但是，不build议使用这种方法，因为它们不是有效的CSS语法。
IE8或以下版本：要写特定的IE8或以下的CSS规则，在分号前加一个反斜杠和9（\ 9）。 IE7或以下版本：在CSS属性之前添加一个星号（*）。 IE6：在属性前添加一个下划线（_）。 .box {
background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */
}
把你的CSS放在下面的脚本中，并粘贴到你的CSS文件中。
@media screen和（-webkit-min-device-pixel-ratio：0）{ 你完整的css风格 }
例如：@media screen和（-webkit-min-device-pixel-ratio：0）{container {margin-top：120px;}}
奇迹般有效。
