php 如何为 mozilla、chrome 和 IE 编写特定的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4332117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to write specific CSS for mozilla, chrome and IE
提问by Sussagittikasusa
What would be the CSS conditional statement you can use to include specific CSS for IE, Mozilla, Chrome.
您可以使用什么 CSS 条件语句来包含 IE、Mozilla、Chrome 的特定 CSS。
If IE
#container { top: 5px; }
If Mozilla
#container { top: 7px; }
If Chrome
#container { top: 9px; }
What would be the respective 'If's' ?
相应的“如果”是什么？
回答by Starx
For that
为了那个原因
- You can scan user Agent and find out which browser, its version. Including the OS for OS specific styles
- You can use various CSS Hacks for specific browser
- Or Scripts or Plugins to indentify the browser and apply various classes to the elements
- 您可以扫描用户代理并找出哪个浏览器及其版本。包括操作系统特定样式的操作系统
- 您可以为特定浏览器使用各种 CSS Hacks
- 或脚本或插件来识别浏览器并将各种类应用于元素
Using PHP
使用 PHP
See
看
- 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)
- 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）
Then then create the dynamic CSS file as per the detected browser
然后根据检测到的浏览器创建动态 CSS 文件
Here is a CSS Hacks list
这是一个 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; }
/* IE7, IE8 */
#veinte { color/*\**/: blue; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Source: http://paulirish.com/2009/browser-specific-css-hacks/
来源：http: //paulirish.com/2009/browser-specific-css-hacks/
If you want to use Plugin then here is one
如果你想使用插件，那么这里是一个
回答by Emmett
You could use php to echo the browser name as a bodyclass, e.g.
您可以使用 php 将浏览器名称作为一个body类来回显，例如
<body class="mozilla">
Then, your conditional CSS would look like
然后，你的条件 CSS 看起来像
.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
回答by JellicleCat
For clean code, you might make use of the javascript file here: http://rafael.adm.br/css_browser_selector/By including the line:
对于干净的代码，您可以使用此处的 javascript 文件：http: //rafael.adm.br/css_browser_selector/通过包含以下行：
<script src="css_browser_selector.js" type="text/javascript"></script>
You can write subsequent css with the following simple pattern:
您可以使用以下简单模式编写后续 css：
.ie7 [thing] {
background-color: orange
}
.chrome [thing] {
background-color: gray
}
回答by Rahly
Since you also have PHP in the tag, I'm going to suggest some server side options.
由于标签中还包含 PHP，因此我将建议一些服务器端选项。
The easiest solution is the one most people suggest here. The problem I generally have with this, is that it can causes your CSS files or <style> tags to be up to 20 times bigger than your html documents and can cause browser slowdowns for parsing and processing tags that it can't understand -moz-border-radiusvs -webkit-border-radius
最简单的解决方案是大多数人在这里建议的解决方案。我一般都用这个，问题是，它可以使你的CSS文件或<style>标记是高达20倍大于你的HTML文档，并可能导致浏览器变慢用于分析和处理的标签，它无法理解-moz-border-radiusVS-webkit-border-radius
The second best solution(i've found) is to have php output your actual css file i.e.
第二个最好的解决方案（我找到了）是让 php 输出你的实际 css 文件，即
<link rel="stylesheet" type="text/css" href="mycss.php">
<link rel="stylesheet" type="text/css" href="mycss.php">
where
在哪里
<?php
header("Content-Type: text/css");
if( preg_match("/chrome/", $_SERVER['HTTP_USER_AGENT']) ) {
// output chrome specific css style
} else {
// output default css style
}
?>
This allows you to create smaller easier to process files for the browser.
这允许您为浏览器创建更小更易于处理的文件。
The best method I've found, is specific to Apache though. The method is to use mod_rewrite or mod_perl's PerlMapToStorageHandler to remap the URL to a file on the system based on the rendering engine.
我发现的最好的方法是特定于 Apache 的。方法是使用 mod_rewrite 或 mod_perl 的 PerlMapToStorageHandler 将 URL 重新映射到基于渲染引擎的系统上的文件。
say your website is http://www.myexample.com/and it points to /srv/www/html. For chrome, if you ask for main.css, instead of loading /srv/www/html/main.cssit checks to see if there is a /srv/www/html/main.webkit.cssand if it exists, it dump that, else it'll output the main.css. For IE, it tries main.trident.css, for firefox it tries main.gecko.css. Like above, it allows me to create smaller, more targeted, css files, but it also allows me to use caching better, as the browser will attempt to redownload the file, and the web server will present the browser with proper 304's to tell it, you don't need to redownload it. It also allows my web developers a bit more freedom without for them having to write backend code to target platforms. I also have .js files being redirected to javascript engines as well, for main.js, in chrome it tries main.v8.js, in safari, main.nitro.js, in firefox, main.gecko.js. This allows for outputting of specific javascript that will be faster(less browser testing code/feature testing). Granted the developers don't have to target specific and can write a main.jsand not make main.<js engine>.jsand it'll load that normally. i.e. having a main.jsand a main.jscript.jsfile means that IE gets the jscript one, and everyone else gets the default js, same with the css files.
说你的网站是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，在火狐中，main.gecko.js。这允许输出更快的特定 javascript（更少的浏览器测试代码/功能测试）。授予开发人员不必针对特定目标，并且可以编写一个main.js而不是 makemain.<js engine>.js并且它会正常加载。即有一个main.js和一个main.jscript.js文件意味着 IE 得到 jscript 一个，其他人得到默认的 js，与 css 文件相同。
回答by Adeel
you can use this code in your css file:
您可以在 css 文件中使用此代码：
-webkit-top:9px;
-moz-top:7px;
top:5px;
the code -webkit-top:9px; is for chrome, -moz-top:7px is for mozilla and the last one is for IE. Have Fun!!!
代码 -webkit-top:9px; 用于 chrome，-moz-top:7px 用于 mozilla，最后一个用于 IE。玩得开心！！！
回答by El Yobo
Paul Irish's approach to IE specific CSS is the most elegant I've seen. It uses conditional statements to add classes to the HTML element, which can then be used to apply appropriate IE version specific CSS without resorting to hacks. The CSS validates, and it will continue to work down the line for future browser versions.
Paul Irish 处理 IE 特定 CSS 的方法是我见过的最优雅的方法。它使用条件语句向 HTML 元素添加类，然后可以使用这些类来应用适当的 IE 版本特定的 CSS，而无需求助于 hack。CSS 会验证，它将继续为未来的浏览器版本工作。
The full details of the approach can be seen on his site.
该方法的完整细节可以在他的网站上看到。
This doesn't cover browser specific hacks for Mozilla and Chrome... but I don't really find I need those anyway.
这不包括针对 Mozilla 和 Chrome 的浏览器特定黑客攻击……但我真的不觉得我需要这些。
回答by Mohammad Efazati
use agent detector and then with your web language create program to create css
使用代理检测器，然后使用您的网络语言创建程序来创建 css
for example in python
例如在python中
csscreator()
useragent = detector()
if useragent == "Firefox":
css = "your css"
...
return css
回答by sudip
Check out this link : http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
查看此链接：http: //webdesignerwall.com/tutorials/css-specific-for-internet-explorer
2 CSS Rules Specific to Explorer (IE CSS hacks)
2 条特定于资源管理器的 CSS 规则（IE CSS hacks）
Another option is to declare CSS rules that can only be read by Explorer. For example, add an asterisk (*) before the CSS property will target IE7 or add an underscore before the property will target IE6. However, this method is not recommended because they are not valid CSS syntax.
另一种选择是声明只能由资源管理器读取的 CSS 规则。例如，在 CSS 属性面向 IE7 之前添加星号 (*) 或在属性面向 IE6 之前添加下划线。但是，不建议使用此方法，因为它们不是有效的 CSS 语法。
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon. IE7 or below: add an asterisk (*) before the CSS property. IE6: add an underscore (_) before the property. .box {
IE8 或以下：要专门为 IE8 或以下编写 CSS 规则，请在最后的分号前添加反斜杠和 9 (\9)。IE7 或以下：在 CSS 属性前添加星号 (*)。IE6：在属性前添加下划线 (_)。。盒子 {
background: gray; /* standard */
background: pink; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
}
回答by pablo
Place your css in the following script and paste it into your CSS file.
将您的 css 放在以下脚本中并将其粘贴到您的 CSS 文件中。
@media screen and (-webkit-min-device-pixel-ratio:0) { your complete css style}
@media screen 和 (-webkit-min-device-pixel-ratio:0) {你完整的 css 样式}
For example: @media screen and (-webkit-min-device-pixel-ratio:0) { container { margin-top: 120px;} }
例如：@media screen and (-webkit-min-device-pixel-ratio:0) { container { margin-top: 120px;} }
Works like a charm.
奇迹般有效。
