如何为Mozilla,Chrome和IE编写特定的CSS

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

If IE #container { top: 5px; } If Mozilla #container { top: 7px; } If Chrome #container { top: 9px; } 

什么是各自的“如果”?

9 Solutions collect form web for “如何为Mozilla,Chrome和IE编写特定的CSS”

为了那个原因

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

使用PHP

看到

然后根据检测到的浏览器创builddynamicCSS文件

这是一个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/

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

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

你可以使用PHP来回显浏览器名称作为一个body类,例如

 <body class="mozilla"> 

那么,你的条件CSS看起来像

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

你可以在你的css文件中使用这个代码:

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

代码-webkit-top:9px; 是铬,-moz-top:7px是Mozilla,最后一个是IE。 玩的开心!!!

对于干净的代码,你可以在这里使用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 } 

保罗爱尔兰的IE浏览器特定的CSS的方法是我见过的最优雅的。 它使用条件语句向HTML元素添加类,然后可以使用条件语句来应用适当的IE版本特定的CSS,而不用求助于黑客。 CSSvalidation,并将继续为未来的浏览器版本下线。

该方法的全部细节可以在他的网站上看到。

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

既然你在标签中也有PHP,我会build议一些服务器端的选项。

最简单的解决scheme是大多数人在这里build议的。 我一般用这个问题的原因是,它会导致你的CSS文件或者<style>标签达到你html文档的20倍,并且会导致浏览器速度慢,无法理解它的parsing和处理标签-moz-border-radius vs -webkit-border-radius

第二个最好的解决scheme(我发现)是让PHP输出你的实际的CSS文件即

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

哪里

 <?PHP
标题(“Content-Type:text / css”);
 if(preg_match(“/ chrome /”,$ _SERVER ['HTTP_USER_AGENT'])){
   //输出铬特定的CSS样式
 } else {
   //输出默认的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 。 像上面那样,它允许我创build更小,更有针对性的css文件,但是它也允许我更好地使用caching,因为浏览器将尝试重新下载文件,并且web服务器将向浏览器呈现适当的304以告诉它,你不需要重新下载它。 这也让我的网站开发者有了更多的自由,而不必为后台代码编写目标平台。 我也有.js文件被redirect到JavaScript引擎,为main.js ,在chrome它尝试main.v8.js ,在safari, main.nitro.js ,在firefox, main.gecko.js 。 这允许输出特定的JavaScript,这将更快(less浏览器testing代码/functiontesting)。 授予开发人员不必具体的目标,并可以写一个main.js而不是main.<js engine>.js ,它会正常加载。 即有一个main.js和一个main.jscript.js文件意味着IE获取jscript之一,其他人都得到默认的js,与css文件一样。

使用代理检测器,然后用你的web语言创build程序来创buildcss

例如在Python中

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

看看这个链接: http : //webdesignerwall.com/tutorials/css-specific-for-internet-explorer

2特定于资源pipe理器的CSS规则(IE CSS hacks)

另一种select是声明只能由资源pipe理器读取的CSS规则。 例如,在CSS属性将以IE7为目标之前添加一个星号(*),或者在该属性将以IE6为目标之前添加一个下划线。 但是,不build议使用这种方法,因为它们不是有效的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 */ 

}

把你的CSS放在下面的脚本中,并粘贴到你的CSS文件中。

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

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

奇迹般有效。

  • PHPerror handling:die()Vs trigger_error()Vs抛出exception
  • 如何检查使用旧API的MySQL查询是否成功?
  • 以正确的方式创buildJSON对象
  • 在PHP上更改upload_max_filesize
  • 如何禁用XDebug
  • 创buildini文件,在PHP中写入值
  • 只有variables引用应该由引用返回 - Codeigniter
  • 什么更快,更好地确定在PHP中是否存在数组键?
  • MySQL变音不敏感search(西class牙口音)
  • 如何使用PHP curl使用HTTP基本身份validation进行请求?
  • PHP只读属性?