avd*_*aag 595 css firefox css-hack
使用条件注释很容易使用特定于浏览器的CSS规则来定位Internet Explorer:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
有时,Gecko引擎(Firefox)行为不端.使用CSS规则而不是单个其他浏览器仅针对Firefox的最佳方法是什么？也就是说,Internet Explorer不仅应该忽略Firefox规则,还应该忽略WebKit和Opera.
注意:我正在寻找一个"干净"的解决方案.在我看来,使用JavaScript浏览器嗅探器向我的HTML添加"firefox"类并不符合要求.我宁愿看到一些取决于浏览器功能的东西,就像条件评论只对IE有"特殊"...
Ion*_*tan 1220
好的,我找到了.这可能是最干净,最简单的解决方案,并不依赖于JavaScript的开启.
@-moz-document url-prefix() {
h1 {
color: red;
}
}<h1>This should be red in FF</h1>它基于另一个Mozilla特定的CSS扩展.这里有一个完整的CSS扩展列表:Mozilla CSS Extensions.
laa*_*sto 82
更新(来自@Antoine评论)
您可以使用 @supports
@supports (-moz-appearance:none) {
h1 { color:red; }
}<h1>This should be red in FF</h1>更多关于@supports 这里
Waq*_*uar 81
以下是如何处理三种不同的浏览器:IE,FF和Chrome
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
Hbi*_*and 15
以下是一些仅针对Firefox浏览器的浏览器黑客,
_:-moz-tree-row(hover), .selector {}
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
这将是适用的,Firefox 3.6及更高版本
@media screen and (-moz-images-in-menus:0) {}
如果您需要更多信息,请访问browserhacks
Ion*_*tan 13
首先,免责声明.我并不是真的提倡我在下面提出的解决方案.我写的唯一浏览器特定的CSS是针对IE(特别是IE6),虽然我希望情况并非如此.
现在,解决方案.你问它优雅,所以我不知道它有多优雅,但它肯定只会针对Gecko平台.
诀窍只有在启用JavaScript时才能使用,并且使用Mozilla绑定(XBL),这些绑定在Firefox内部和所有其他基于Gecko的产品中大量使用.为了进行比较,这就像IE中的行为CSS属性,但功能更强大.
我的解决方案涉及三个文件:
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
更新: 以上解决方案并不是那么好.它会更好,如果不是追加一个新的LINK元素,它将增加该 body元素的"火狐"级.并且可以通过以下方式替换上面的JS:
this.className += " firefox";
解决方案的灵感来自Dean Edwards的moz行为.
Ray*_*jax 11
使用-engine特定规则可确保有效的浏览器定位.
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
@media screen and (-webkit-min-device-pixel-ratio:0) {
color:green;
}
//Firefox
@media screen and (-moz-images-in-menus:0) {
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
您的想法的一个变体是有一个server-side USER-AGENT detector将确定要附加到页面的样式表.这样你就可以了firefox.css, ie.css, opera.css, etc.
你可以在Javascript中完成类似的事情,虽然你可能不认为它是干净的.
我已经做了类似的事情default.css,包括all common styles and then specific style sheets添加了覆盖,或增强默认值.
现在，Firefox Quantum 57对Gecko（称为Stylo或Quantum CSS）进行了实质性的改进，并且有可能突破性的改进，您可能会发现自己必须区分Firefox的旧版本和Firefox Quantum。
从我的回答这里：
你可以用
@supports与calc(0s)结合表达@-moz-document，以测试柱花草-壁虎不支持时间值calc()表达式，但柱花草的作用：Run Code Online (Sandbox Code Playgroud)@-moz-document url-prefix() { @supports (animation: calc(0s)) { /* Stylo */ } }这是一个概念证明：
Run Code Online (Sandbox Code Playgroud)body::before { content: 'Not Fx'; } @-moz-document url-prefix() { body::before { content: 'Fx legacy'; } @supports (animation: calc(0s)) { body::before { content: 'Fx Quantum'; } } }定位Firefox的旧版本会有些棘手-如果您只对支持
@supportsFx 22及更高版本的版本感兴趣，那么您就@supports not (animation: calc(0s))需要：Run Code Online (Sandbox Code Playgroud)@-moz-document url-prefix() { @supports not (animation: calc(0s)) { /* Gecko */ } }...但是，如果您需要甚至支持较旧的版本，则需要使用层叠，如上面概念验证所示。
| 归档时间： |
|
| 查看次数： |
551404 次 |
| 最近记录： |