当前位置： 文江博客话题详情

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

发布于 2024-10-05 04:32:05 字数 214 浏览 4 评论 0原文

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

If IE  
#container { top: 5px; }  

If Mozilla 
#container { top: 7px; }    

If Chrome  
#container { top: 9px; }

各自的“如果”是什么？

原文

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; }

What would be the respective 'If's' ?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

再浓的妆也掩不了殇 2024-10-12 04:32:05

为此，

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

使用 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 -specic-css-hacks/

如果您想使用插件，那么这里有一个

http://rafael .adm.br/css_browser_selector/

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

Using PHP

See

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

Here is a CSS Hacks list

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

Source: http://paulirish.com/2009/browser-specific-css-hacks/

If you want to use Plugin then here is one

http://rafael.adm.br/css_browser_selector/

回复 原文
败给现实 2024-10-12 04:32:05

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

<body class="mozilla">

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

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

You could use php to echo the browser name as a body class, e.g.

<body class="mozilla">

Then, your conditional CSS would look like

.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
回复 原文
迷乱花海 2024-10-12 04:32:05

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

For clean code, you might make use of the javascript file here: http://rafael.adm.br/css_browser_selector/
By including the line:

<script src="css_browser_selector.js" type="text/javascript"></script>

You can write subsequent css with the following simple pattern:

.ie7 [thing] {
  background-color: orange
}
.chrome [thing] {
  background-color: gray
}
回复 原文
终遇你 2024-10-12 04:32:05

由于标签中还包含 PHP，因此我将建议一些服务器端选项。

最简单的解决方案是大多数人在这里建议的解决方案。我通常遇到的问题是，它可能会导致您的 CSS 文件或

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

其中

<?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 .ninto.js，在 Firefox 中，main.gecko.js。这允许更快地输出特定的 javascript（更少的浏览器测试代码/功能测试）。当然，开发人员不必针对特定目标，可以编写 main.js 而不是制作 main..js 并且它会正常加载。即有一个 main.js 和一个 main.jscript.js 文件意味着 IE 获取 jscript 文件，其他人获取默认 js，与 css 文件相同。

Since you also have PHP in the tag, I'm going to suggest some server side options.

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-radius vs -webkit-border-radius

The second best solution(i've found) is to have php output your actual css file i.e.

<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.

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.css it checks to see if there is a /srv/www/html/main.webkit.css and 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.js and not make main.<js engine>.js and it'll load that normally. i.e. having a main.js and a main.jscript.js file means that IE gets the jscript one, and everyone else gets the default js, same with the css files.

回复 原文
葬花如无物 2024-10-12 04:32:05

Paul Irish 对 IE 特定 CSS 的方法是我见过的最优雅的方法。它使用条件语句将类添加到 HTML 元素，然后可以使用这些类来应用适当的 IE 版本特定 CSS，而无需求助于 hack。 CSS 已通过验证，并将继续在未来的浏览器版本中发挥作用。

该方法的完整细节可以在他的网站。

这不包括 Mozilla 和 Chrome 浏览器特定的黑客攻击……但我确实发现我并不需要这些。

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.

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.

回复 原文
凉城已无爱 2024-10-12 04:32:05

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

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

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

you can use this code in your css file:

 -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!!!

回复 原文
遗弃Ｍ 2024-10-12 04:32:05

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

例如在 python 中

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

use agent detector and then with your web language create program to create css

for example in python

csscreator()
    useragent = detector()
    if useragent == "Firefox":
         css = "your css"
    ...
    return css
回复 原文
魔法少女 2024-10-12 04:32:05

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

2 特定于 Explorer 的 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 */

}

Check out this link : http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

2 CSS Rules Specific to Explorer (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.

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 {

background: gray; /* standard */

background: pink\9; /* IE 8 and below */

*background: green; /* IE 7 and below */

_background: blue; /* IE 6 */

}

回复 原文
触ぅ动初心 2024-10-12 04:32:05

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

@media screen 和 (-webkit-min-device-pixel-ratio:0) { 你完整的 css 样式 }

例如：
@media screen and (-webkit-min-device-pixel-ratio:0) { container { margin-top: 120px;} }

就像一个魅力。

Place your css in the following script and paste it into your CSS file.

@media screen and (-webkit-min-device-pixel-ratio:0) { your complete css style }

For example:
@media screen and (-webkit-min-device-pixel-ratio:0) { container { margin-top: 120px;} }

Works like a charm.

回复 原文
~没有更多了~

关于作者

请你别敷衍

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文