针对 Firefox 的 CSS Hack | CSS-Tricks

Robin

# 2009 年 11 月 2 日

也许我可以测试或猜猜，但它做了什么？

Andrew Champ

评论永久链接# 2009 年 11 月 30 日

它只针对 Firefox 浏览器，因此您可以进行 CSS 异常处理。您将使用它进行 hack，以使您的网站更加功能。（如果需要）。

大多数 hack 是针对 IE 的，因为它们的渲染方式可能与其他浏览器有很大不同。
David

评论永久链接# 2015 年 3 月 7 日

这可能是我多年来遇到的最棒的小 hack！一块小小的金子。谢谢。

Tom

# 2011 年 1 月 7 日

嘿，

感谢您的提示，但它在 Firefox 3.6.x 中不再起作用。

Anjana

评论永久链接# 2014 年 8 月 13 日

@-moz-document url-prefix() {
.selector {
color:lime;
}
}

这在 Firefox 31 中也能正常工作！！！！！

Tom

# 2011 年 1 月 7 日

但这个有效！

.selector, x:-moz-any-link, x:default { color:lime; } /* Firefox 3 */

Ashuri

评论永久链接# 2012 年 5 月 8 日

@Tom 谢谢！这对我有用 :)
Ram

评论永久链接# 2014 年 6 月 11 日

感谢 Tom
它帮助我很多

sistu

# 2011 年 2 月 27 日

@tom：非常感谢！对我有用！

Mohit

# 2011 年 4 月 29 日

感谢您提供的资讯。

请告诉我有关 Firefox 4.0 和 IE9 CSS hack 的信息……。

Vindesh Mohariya

# 2011 年 5 月 15 日

这是 mozilla 的一个非常棒的 hack。

它解决了我的 mozilla-firefox 问题。

谢谢您
Vindesh Mohariya

@3kolone

# 2011 年 5 月 18 日

IE 9 hack …

.selector { color: #fff\9; }

有人知道 Firefox 4 的 hack 吗？

Isaac

评论永久链接# 2011 年 5 月 19 日

“\9” 对 ie8 和 ie9 都适用。
mike

评论永久链接# 2011 年 6 月 3 日

\9 对所有 IE 版本都适用
mark cantos

评论永久链接# 2011 年 11 月 15 日

它在我的网站上也能正常工作，感谢分享
sjoerd

评论永久链接# 2013 年 11 月 20 日

.selector { color: #fff\9; }

对 IE11 不再起作用

有其他可用的 hack 吗？

ysh

# 2011 年 7 月 30 日

嗯.. 它做了什么？呵呵，对不起，我是一个新手。 :))

Riyaadh

评论永久链接# 2012 年 12 月 5 日

元素在 IE 中并不总是与在 Firefox 中显示相同。
因此，在元素上使用 \9 仅会针对 IE。

示例
.whatever { margin: 20px 0 0 0;
margin: 25px 0 0 0 \9;
}

在所有浏览器中（IE 除外），margin-top 将为 20px，但在 IE 中 margin-top 将为 25px。

希望这能帮到你！！ :)
Yeswanth

评论永久链接# 2015 年 5 月 27 日

@Riyaadh .. “\9” 表示小于 IE 9

maggie

# 2011 年 10 月 24 日

在 FF 加载页面时可以使用某些类吗？

Eric Sebasta

评论永久链接# 2016 年 2 月 5 日
您可以在服务器端使用 php 或使用 javascript。
```
if (navigator.userAgent.match(/firefox/i)) {
document.getElementById("myID")..className += " firefox"
// $('#myID').addClass('firefox') 
}
```
如果您有 jQuery，注释掉的代码可以正常工作，而且阅读起来更容易。

jacvk

# 2011 年 10 月 26 日

@-moz-document url-prefix() 在 Firefox 7 中似乎不起作用。还有其他想法吗？

lawrence

评论永久链接# 2015 年 6 月 23 日

在您的实际 CSS 中写入您的 -moz-webkit-appearance。

mee

# 2011 年 11 月 14 日

嗯，如果我在 a:hover 或类似的元素上使用任何 FF hack。它不起作用……

@-moz-document url-prefix() {
a:focus {padding-bottom: 7px;}
}

有人可以帮忙吗？

mee

# 2011 年 11 月 15 日

我解决了它。这是一个结构问题……
感谢您的热心提示 :-)

ahmet

评论永久链接# 2012 年 1 月 3 日

您是如何解决的？我卡在这里。
guest 00

评论永久链接# 2012 年 1 月 18 日

@ahmet，

一旦他们的问题得到解决，人们就不会再回复了，mee 只是其中之一。我其实也在寻找解决方案。

干杯
nitesh

评论永久链接# 2014 年 6 月 27 日

你是怎么做到的？

falguni

# 2011 年 12 月 5 日

太棒了！谢谢。

bm

# 2012 年 1 月 5 日

您知道如何只针对 FF9 吗？我实际上在 Mac 和 PC 上使用相同版本的 FF 时遇到了 CSS 渲染不同的问题。以前从未遇到过这样的问题。谢谢

Frederik

# 2012 年 1 月 23 日

不错的列表。谢谢

Ron

# 2012 年 2 月 9 日

很棒，而且很及时。感谢您的 hack 帮助！

Roberto Bahena

# 2012 年 2 月 9 日

嘿 Chris，
从来没有机会感谢你，你的网站是我在需要学习或寻找有关 CSS 的信息时第一个访问的网站。您的网站对我们网络开发人员来说非常宝贵。我从您的网站中学到了很多东西，请继续努力。

谢谢

Travis

# 2012 年 2 月 13 日

这似乎无效

@-moz-document url-prefix() {
#divhere {
color: red;
}
}

CSS 似乎与包装括号混淆了，导致它无效，有什么想法吗？

Jass

评论永久链接# 2019 年 12 月 30 日
也许添加缩进？这是我的代码
```
@-moz-document url-prefix() {
  #divhere {
    color: red;
  }
}
```

Travis

# 2012 年 2 月 13 日

看起来它现在可以工作了，尽管只有在我将 !important 添加到值末尾时……很奇怪。另外需要注意的是我正在使用 scss 表格

Federico Bozo

# 2012 年 3 月 27 日

感谢您的帖子。完美地工作。我想我们使用的大多数程序（如 Dreamweaver、CSSEdit 等）都会报告此 hack 的错误，因为它具有双括号 {。
至少我认为这是我在 CSSEdit 中编写它时发生的事情。

我已将此帖子翻译成西班牙语，如下所示。

http://corchoweb.com/2012/codigo/hacks-de-css-especificos-para-firefox/

再次感谢。

Mandip Luitel

# 2012 年 3 月 29 日

完美地工作 :)

谢谢

Naga

# 2012 年 5 月 19 日

有人可以帮我找到解决方案吗
我正在使用此代码
@-moz-document url-prefix() {} – 它适用于除 Mac 之外的所有 Firefox
请给我建议。
提前感谢。

Dheeraj

# 2012 年 6 月 16 日

我正在使用滑块来使用 jQuery 解锁。但在 Firefox 上运行不正常。请告诉我 -webkit-animation 的 Firefox 替代方案是什么？。
提前感谢！

Dee

# 2012 年 7 月 19 日

如果你使用悬停或焦点状态，如何让它工作？谢谢。

Eric Sebasta

# 2016 年 12 月 30 日

@-moz-document url-prefix() {
      #mydiv:hover {
         opacity: 1;
      }
  }

Suleman

# 2012 年 8 月 7 日

当我使用此代码时

@-moz-document url-prefix() {
.selector {
color:lime;
}
}

它在我的电脑上工作，但是当我将网站上传到 cpanel 时，它不起作用

Geoff Kendall

# 2012 年 8 月 15 日

我绝不是什么网页设计大师，但我发现，在我制作了大约 25 个网站的过程中，如果 Firefox 和 IE9 之间存在差异，而且您在使用高级 CSS 选择器方面没有特别实验，那么检查一件非常基本的事情是有意义的：您的代码是否经过验证，既要验证 HTML，也要验证 CSS。现代浏览器确实非常一致，特别是如果您使用 Eric Meyer 这样的重置 CSS，但它们在尝试使错误代码工作时确实做了一些不同的事情。因此，如果您尚未验证，那么绝对值得首先将您的代码带到那里。IMHO。

Saket Jajodia

# 2012 年 9 月 18 日

其他网页浏览器（如 Safari 和 Opera）呢？

Russell Crow

评论永久链接# 2013 年 4 月 28 日

这将在 Opera 中运行。

noindex:-o-prefocus, .selector{

margin-left: 3em;

}

对于 Safari。您需要额外的括号将您的选择器和规则包装在针对 webkit 的 hack 中。我注意到当我输入时，它会将第二组括号放在同一行。底部的这两个括号需要放在单独的行上。

@media all and (-webkit-min-device-pixel-ratio:0){
.selector{

margin-left: 3em;

}
}

SAM

# 2012 年 10 月 9 日

它有效.. 谢谢 :-) 做得好

匿名

# 2012 年 10 月 19 日

你是 DA BOMB，伙计！！！救了我的屁股。

Adam

# 2012 年 10 月 25 日

太好了。只是，针对所有 FF 版本的代码无法验证。:(

Tommy

评论永久链接# 2013 年 5 月 8 日

抱歉 @chris – 使用 @import 没有成功，但我通常很长时间没有使用 import 了，所以你为什么要这样做呢？

@buelem 感谢您提供的链接，为什么我们必须为所有这些浏览器这样做……什么时候 2 或 3 个浏览器会更新，而且没有那么多……

Urooj

# 2012 年 12 月 5 日

非常感谢您提供的非常有用的帖子

Gunjan

# 2013 年 1 月 11 日

有没有针对 MAC Chrome 的特定 CSS hack？

Blue Lem

# 2013 年 2 月 21 日

对于任何试图定位 Opera 和 Safari 的人，您可能还需要查看这一点

http://www.webmonkey.com/2010/02/browser-specific_css_hacks/

hopeeg

# 2013 年 3 月 13 日

我的 Firefox css 宽度存在严重问题，有什么建议吗？

Chris

# 2013 年 4 月 2 日

有人在 moz 特定的 css 中使用 @import 成功吗？
像这样

@-moz-document url-prefix() {
@import url(“ff_font.css”);
}

Russell Crow

# 2013 年 4 月 28 日

我想有一个可以定位 Chrome 而不定位 Safari 的 hack。问题是它们都是 webkit 平台。当我定位 Safari 时，我有点不得不将 Safari 和 Chrome 之间的区别分隔开。

Satyajit

# 2013 年 6 月 4 日

针对 Firefox 的极好 hack……非常感谢……

My Josephine

# 2013 年 6 月 26 日

我已经使用了一段时间了，想回到这里感谢您，因为它们在跨浏览器修复网站时让事情变得容易了很多。

Arian Tashakkor

# 2013 年 8 月 10 日

你好！
我有一个问题！
如何为 Firefox 移动版编写特殊样式？（对于 Firefox 移动应用程序）

非常感谢

此致

Summit Web Solutions

# 2013 年 8 月 29 日

嗨，Adrian，

您只需将您的 Firefox 内容包装在媒体查询中

例如

@media only screen and (min-width:320px){
 @-moz-document url-prefix() { 
  .selector {
     color:lime;
  }
 }
}

Michael

评论永久链接# 2013 年 12 月 17 日

嗨，Summit Web Solutions，
感谢您的分享！我需要 Firefox 特定的媒体查询来完成一个客户网站。
Alex

评论永久链接# 2016 年 7 月 8 日

非常感谢，Summit Web Solutions。这解决了我的问题 :)

Russ Crow

# 2013 年 12 月 1 日

我真的很惊讶它对您不起作用。它看起来确实像您正确输入了它。您可以访问我的网站并进入我的样式表，看看我如何使用这个 foxfire hack。在我的当前样式表中，我已经使用了 42 次。

Russ Crow

# 2013 年 12 月 1 日

Sharon！我真的很惊讶它对您不起作用。它看起来确实像您正确输入了它。您可以访问我的网站并进入我的样式表，看看我如何使用这个 foxfire hack。在我的当前样式表中，我已经使用了 42 次。

gaurav

# 2014 年 1 月 28 日

@-moz-document url-prefix() {
div.orgChart tr.lines td.line {
width : 1px;
height : 35px;
-moz-width : 1px;
-moz-height : 35px;
}

div.orgChart tr.lines td.top {
border-top : 3px solid black;
-moz-border-top : 3px solid black;
}

div.orgChart tr.lines td.left {
border-right : 2px solid black;
-moz-border-right : 2px solid black;
}

div.orgChart tr.lines td.right {
border-left : 2px solid black;
-moz-border-left : 2px solid black;
}
}

gaurav

# 2014 年 1 月 28 日

上面的代码用于在图表中创建一条线
但它们不起作用

Satbir

# 2014 年 2 月 10 日

@-moz-document url-prefix() {
类 {
color:lime;
}
}

它现在有效

(*class) 这是针对 i8 的 hack
(padding=0px 0px 0px 0px\9) 这是针对 ie9、ie10 的 hack

jason

# 2014 年 2 月 21 日

我知道这篇文章已经存在一段时间了！但是这个 hack 应该在最新版本的 Firefox 中工作吗？

我有一个想要在伪元素上修复的重复背景问题！

如果它不起作用，是否有更新的解决方案？

谢谢。

Jason

评论永久链接# 2014 年 2 月 21 日

好的，最终 Firefox 3 版本对我有用。但无论出于何种原因，我无法让任何版本的 Firefox 运行。

无论如何，它现在可以工作了，这很棒！

感谢 Chris。

Lucky Bhumkar

# 2014 年 3 月 16 日

有效！感谢您节省了时间

GANESH MURTHY

# 2014 年 5 月 16 日

这有效！！！谢谢 :)

Mohd Javed

# 2014 年 6 月 6 日

它在媒体查询中不起作用。有人可以建议我在媒体查询中如何使用它吗？

Eric Sebasta

评论永久链接# 2016年2月5日
使用媒体查询加载css文档。把它放在那里。然后它总是起作用。
```
<link rel='stylesheet' 
media='(min-width: 641px) and (max-width: 799px)' 
href='medium.css' />
```

杰克

# 2014年8月28日

那IE呢？

托尼·B

# 2014年10月24日

非常感谢你发布了这个。我已经花了2天时间来设计一个非常复杂的滑块，直到第三天才意识到Firefox取了我的一些CSS并开始自己创建像素值。真是太烦人了。

我使用了任何版本的Firefox，它工作得很好。

克里希南

# 2014年12月4日

是否有针对Mozilla低于32版和高于33版的黑客？

琼

# 2015年1月8日

任何Firefox在FF 22中都不起作用。

里兹班·艾哈迈德

# 2015年2月17日

任何Firefox的css都不起作用。

凯达尔·纳特·辛格

# 2015年2月18日

谢谢，这对我很有效。

弗兰克

# 2015年3月1日

我找到了一个完整的浏览器目标媒体查询列表，但我把它弄丢了。

有人有包含所有浏览器的好列表吗？
我不关心过时的浏览器，但我关心所有当前的浏览器。

布莱恩

# 2015年3月18日

对此有任何更新吗？我被困在只针对Firefox。Firefox 36.0.1

谢谢
布莱恩

阿鲁尔

# 2015年5月21日

看看这个例子

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

萨贾德

# 2015年8月3日

太棒了！它对我有用。

丹尼

# 2015年10月14日

这很棒，完全满足我的需求。谢谢你:)

马努

# 2015年10月30日

太棒了！谢谢！

哈什

# 2016年2月16日

您好，我的Firefox版本是44.0.2。如何为此版本应用css黑客？

马特·乌雷诺维奇

评论永久链接# 2016年6月27日

使用任何Firefox代码段，它将针对任何版本的Firefox。

瓦卡斯

# 2016年5月13日

非常感谢你。
你解决了我的大问题。

马特·乌雷诺维奇

# 2016年6月27日

太棒了！这些很棒，特别是在你遇到不同浏览器中伪元素的讨厌的小错误时。另一个很棒的代码段，非常感谢！

阿布诺尔

# 2016年7月20日

非常感谢。第三个代码完美地起作用。

比拉尔·拉比

# 2016年8月3日

对我当前的项目非常有帮助。从我这边给5星。

隆克

# 2016年10月10日

太棒了！这对我有用。在使用很棒但代码非常紧凑的“报纸”主题时遇到了一些麻烦。任何CSS调整似乎都会在Firefox中查看时破坏布局。只需在Style.css文件中添加插件加、.gecko或.webkit到点-任何CSS调整的前面，就可以控制Chrome或Firefox浏览器对自定义调整的控制。

谢谢！

凯尔·霍尔姆伯格

# 2017年2月21日

克里斯，我希望你仍然在阅读这些，尽管它已经很老了...

你将如何为Firefox的iOS应用程序进行媒体查询？！

Xn

# 2017年7月16日

选择器

html:first-child div
{
   /* targets only Firefox and is validated correctly on W3C. 
       html is first child of ...? */
}

卡皮

# 2017年7月17日

我可以确认在2017年7月，“任何Firefox”仍然像魅力一样工作，即使是在嵌套的SASS中也是如此。

.foo {
    padding: 5px 10px;

    @-moz-document url-prefix() {
        padding: 4px 10px;
        }
    }

阿尼尔·贾德哈夫

# 2017年8月1日

谢谢！只是，针对所有Firefox版本的代码无法验证。:)

简·莫里斯

# 2017年9月22日

谢谢！救了我的命。

保罗·库罗

# 2018年1月24日

“任何Firefox”黑客将在Firefox 59中被删除（主流版本：2018年3月13日。）=> 请查看https://www.fxsitecompat.com/en-CA/docs/2015/moz-document-support-will-be-dropped/

哈桑

# 2018年1月31日

对于Chrome ==>@supports (-webkit-appearance:none) {}
对于Firefox ==>_::-moz-range-track, body:last-child .selector {}

你可以参考这个网站http://browserhacks.com/

肯尼

# 2018年6月28日

.foo {
padding: 5px 10px;

@-moz-document url-prefix() {
padding: 4px 10px;
}
}

在Firefox 60.0.2（64位）中不再起作用。

希望有什么新的东西可以工作吗？

杰夫·格雷厄姆

评论永久链接# 2018年6月29日

感谢提醒！是的，看起来这是一个Mozilla在Firefox 59之后停止支持的实验性属性。我已经更新了代码段，但是新语法是：@document url()。

肯尼

# 2018年6月29日

谢谢杰夫。新语法也必须是实验性的。我刚刚尝试过用它来隐藏Firefox中的一个div，但它不起作用。顺便说一下，我想在Firefox中隐藏的div是Gtranslate，它在Firefox中不起作用。

勒内

评论永久链接# 2018年11月18日

在FF 61中它在标志后面。
layout.css.moz-document.content.enabled = true
最好咨询MDN了解任何与-moz-相关的东西。他们应该知道；)

萨特鲁格纳·塞西

# 2019年4月10日

如何在我写的媒体查询下使用@-moz-document url-prefix()？它不起作用。

内博伊沙

# 2019年7月25日

我认为是相反的，你需要在媒体查询下使用@-moz-document url-prefix()…

@media only screen and (max-width: 480px) {
    @-moz-document url-prefix() {
        .selector {
            color: red;
        }
    }
}

鲍勃

# 2019年6月18日

我只想说声谢谢！我的视频背景在Firefox Android上不起作用，所以我使用了这段代码来隐藏DIV，以便显示一个正常的图像背景。

Web Infinity NZ

评论永久链接# 2019年6月18日

哈哈！我真蠢！我认为我使用的代码会尝试同时定位桌面和手机版Firefox。
@-moz-document url-prefix() {
.selector {
color: lime;
}
}

有人知道如何只定位Firefox Android吗？

Firefox 2

Firefox 3

任何 Firefox 版本

Firefox 2

Firefox 3

任何 Firefox 版本

评论

发表评论 取消回复

发表评论取消回复