您可以使用什么 CSS 条件语句来包含 IE、Mozilla、Chrome 的特定 CSS。
If IE
#container { top: 5px; }
If Mozilla
#container { top: 7px; }
If Chrome
#container { top: 9px; }
各自的“如果”是什么？
问问题
125196 次
9 回答
35
为了那个原因
- 您可以扫描用户代理并找出哪个浏览器及其版本。包括操作系统特定样式的操作系统
- 您可以针对特定浏览器使用各种 CSS Hacks
- 或脚本或插件来识别浏览器并将各种类应用于元素
使用 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）
然后根据检测到的浏览器创建动态 CSS 文件
这是一个 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/
如果你想使用插件，那么这里是一个
于 2010-12-02T05:58:54.977 回答
8
您可以使用 php 将浏览器名称作为一个body类来回显，例如
<body class="mozilla">
然后，您的条件 CSS 看起来像
.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
于 2010-12-02T06:00:14.187 回答
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
}
于 2011-01-28T17:52:18.890 回答
2
由于标签中还有 PHP，我将建议一些服务器端选项。
最简单的解决方案是大多数人在这里建议的解决方案。我通常遇到的问题是，它可能导致您的 CSS 文件或 <style> 标签比您的 html 文档大 20 倍，并且可能导致浏览器在解析和处理它无法理解的标签时-moz-border-radius变慢-webkit-border-radius
第二个最佳解决方案（我发现）是让 php 输出您的实际 css 文件，即
<link rel="stylesheet" type="text/css" href="mycss.php">
在哪里
<?php
header("内容类型：文本/css");
if( preg_match("/chrome/", $_SERVER['HTTP_USER_AGENT']) ) {
// 输出 chrome 特定的 css 样式
} 别的 {
// 输出默认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。像上面一样，它允许我创建更小、更有针对性的 css 文件，但它也允许我更好地使用缓存，因为浏览器会尝试重新下载文件，并且 Web 服务器会向浏览器显示正确的 304 来告诉它，您无需重新下载。它还允许我的 Web 开发人员有更多的自由，而不必为目标平台编写后端代码。我也有 .js 文件被重定向到 javascript 引擎，因为main.js，在 chrome 中它尝试main.v8.js，在 safari 中，main.nitro.js，在火狐中，main.gecko.js。这允许输出更快的特定 javascript（更少的浏览器测试代码/功能测试）。授予开发人员不必针对特定目标并且可以编写 amain.js而不是 makemain.<js engine>.js并且它会正常加载。即拥有一个main.js和一个main.jscript.js文件意味着 IE 获得 jscript 一个，其他人获得默认 js，与 css 文件相同。
于 2010-12-02T06:37:59.000 回答
1
Paul Irish 的 IE 特定 CSS 方法是我见过的最优雅的。它使用条件语句向 HTML 元素添加类，然后可以使用这些类应用适当的 IE 版本特定的 CSS，而无需求助于 hack。CSS 验证，它将继续为未来的浏览器版本工作。
该方法的完整细节可以在他的网站上看到。
这不包括针对 Mozilla 和 Chrome 的浏览器特定的黑客攻击......但我真的不觉得我需要这些。
于 2010-12-02T06:05:00.613 回答
1
您可以在您的 css 文件中使用此代码：
-webkit-top:9px;
-moz-top:7px;
top:5px;
代码-webkit-top:9px；用于 chrome，-moz-top:7px 用于 mozilla，最后一个用于 IE。玩得开心！！！
于 2010-12-02T06:27:04.663 回答
0
使用代理检测器，然后使用您的网络语言创建程序来创建 css
例如在python中
csscreator()
useragent = detector()
if useragent == "Firefox":
css = "your css"
...
return css
于 2010-12-02T06:12:07.053 回答
0
查看此链接：http ://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
2 特定于资源管理器的 CSS 规则（IE CSS hacks）
另一种选择是声明只能由 Explorer 读取的 CSS 规则。例如，在 CSS 属性以 IE7 为目标之前添加星号 (*) 或在属性以 IE6 为目标之前添加下划线。但是，不推荐使用此方法，因为它们不是有效的 CSS 语法。
IE8 或更低版本：要专门为 IE8 或更低版本编写 CSS 规则，请在分号前的末尾添加反斜杠和 9 (\9)。IE7 或以下：在 CSS 属性前添加星号 (*)。IE6：在属性前添加下划线 (_)。。盒子 {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
于 2013-05-22T11:15:48.330 回答
0
将您的 css 放在以下脚本中并将其粘贴到您的 CSS 文件中。
@media screen and (-webkit-min-device-pixel-ratio:0) {你的完整css风格}
例如：@media screen and (-webkit-min-device-pixel-ratio:0) { container { margin-top: 120px;} }
奇迹般有效。
于 2013-07-10T08:48:55.667 回答