2特定于Explorer的CSS规则（IE CSS hacks）

Question

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

If IE  
#container { top: 5px; }  

If Mozilla 
#container { top: 7px; }    

If Chrome  
#container { top: 9px; }

各自的'If'是什么？

Answer 1

为此

您可以扫描用户代理并找出其版本的浏览器。包括操作系统特定样式的操作系统
您可以针对特定浏览器使用各种CSS Hacks
或脚本或插件，用于识别浏览器并将各种类应用于元素

使用PHP

见

然后根据检测到的浏览器

创建动态CSS文件

这是一个CSS Hacks列表

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

Answer 2

您可以使用php将浏览器名称作为body类回显，例如

<body class="mozilla">

然后，您的条件CSS看起来像

.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}

Answer 3

对于干净的代码，您可以在此处使用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
}

Answer 4

由于您在标签中也有PHP，我将建议一些服务器端选项。

最简单的解决方案是大多数人在这里建议的解决方案。我通常遇到的问题是它可能导致你的CSS文件或＆lt; style＆gt;标签最多比html文档大20倍，并且可能导致浏览器速度降低以解析和处理无法理解的标签-moz-border-radius vs -webkit-border-radius

第二个最好的解决方案（我发现）是让php输出你的实际css文件，即

<link rel="stylesheet" type="text/css" href="mycss.php">

，其中

<?php
header("Content-Type: text/css");
if( preg_match("/chrome/", $_SERVER['HTTP_USER_AGENT']) ) {
  // output chrome specific css style
} else {
  // output default css style
}
?>

这使您可以为浏览器创建更小的处理文件。

我发现的最佳方法是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。像上面一样，它允许我创建更小，更有针对性的css文件，但它也允许我更好地使用缓存，因为浏览器将尝试重新下载文件，并且Web服务器将向浏览器提供正确的304以告诉它，你不需要重新下载它。它还允许我的Web开发人员更自由，而不必将后端代码写入目标平台。我也将.js文件重定向到javascript引擎，对于main.js，在chrome中尝试main.v8.js，在safari中，main.nitro.js，在firefox中，main.gecko.js。这允许输出更快的特定javascript（更少的浏览器测试代码/功能测试）。虽然开发人员没有特定目标，但可以编写main.js而不是main.<js engine>.js，并且它会正常加载。即拥有main.js和main.jscript.js文件意味着IE获取jscript，其他人都获得默认js，与css文件相同。

Answer 5

Paul Irish对IE特定CSS的处理方式是我见过的最优雅的。它使用条件语句将类添加到HTML元素，然后可以使用它来应用适当的IE版本特定的CSS而不诉诸黑客。 CSS验证，它将继续用于未来的浏览器版本。

可以看到该方法的全部细节on his site。

这不包括针对Mozilla和Chrome的浏览器特定黑客攻击......但我真的不觉得我还需要那些。

Answer 6

您可以在css文件中使用此代码：

 -webkit-top:9px;  
-moz-top:7px; 
top:5px;

代码-webkit-top：9px;用于chrome，-moz-top：7px用于mozilla，最后一个用于IE。玩得开心!!!

Answer 7

使用代理检测器，然后使用您的Web语言创建程序来创建css

例如在python中

csscreator()
    useragent = detector()
    if useragent == "Firefox":
         css = "your css"
    ...
    return css

Answer 8

点击此链接：http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

2特定于Explorer的CSS规则（IE CSS hacks）

另一种选择是声明只能由资源管理器读取的CSS规则。例如，在CSS属性将以IE7为目标之前添加星号（*）或在属性将以IE6为目标之前添加下划线。但是，建议不要使用此方法，因为它们不是有效的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 */

}

Answer 9

将您的css放入以下脚本并将其粘贴到CSS文件中。

@media screen and（-webkit-min-device-pixel-ratio：0）{您的完整CSS样式}

例如： @media screen和（-webkit-min-device-pixel-ratio：0）{container {margin-top：120px;}}

像魅力一样。

如何为mozilla，chrome和IE编写特定的CSS

9 个答案:

使用PHP

这是一个CSS Hacks列表

如果你想使用插件，那么这里就是一个

2特定于Explorer的CSS规则（IE CSS hacks）