如何编写特定的CSS为mozilla，chrome和IE [英] How to write specific CSS for mozilla, chrome and IE

问题描述

什么是CSS条件语句，您可以使用包括特定的CSS为IE，Mozilla，Chrome。

What would be the CSS conditional statement you can use to include specific CSS for IE, Mozilla, Chrome.

If IE  
#container { top: 5px; }  

If Mozilla 
#container { top: 7px; }    

If Chrome  
#container { top: 9px; }

相应的If是什么？

推荐答案

对于

• 您可以扫描用户代理，版。包括操作系统特定样式的操作系统


• 您可以为特定浏览器使用各种CSS Hacks


• 或脚本或插件识别浏览器并应用各种类到元素

请参阅

• 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）

• 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 (contains JS also)

然后根据检测到的浏览器创建动态CSS文件

Then then create the dynamic CSS file as per the detected browser

/***** 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/

http：//rafael.adm。 br / css_browser_selector /

这篇关于如何编写特定的CSS为mozilla，chrome和IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！