如何使用 CSS 定位 Firefox 和 IE？答案

【问题标题】：How to target Firefox and IE with CSS?如何使用 CSS 定位 Firefox 和 IE？
【发布时间】：2015-02-04 16:15:07
【问题描述】：

从 webkit 浏览器到 Firefox 和 Internet Explorer，我的网站布局略有不同。我需要针对 Firefox 和 IE 仅在这两个浏览器中应用一些 CSS。

我试过火狐：

@-moz-document url-prefix() {
    // CSS here
}

我已经为 IE 尝试了这两种解决方案：

<!--[if IE]><!-->
    // Load specific CSS file here
<!--<![endif]-->

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // CSS here
}

但是没有任何效果。我需要用Javascript来做吗？如果是这样，为什么我不能像每个人似乎都使用 CSS 或 HTML 来定位它？

【问题讨论】：

IE 条件 cmets 肯定可以工作。如果你能解释为什么你认为你需要为 Firefox 做一些特别的事情，你可能会得到一个更好的答案。
另外，请在此处查看各种黑客攻击...browserhacks.com
这是网站：link。如果您转到“CONTATO”部分，您会看到社交媒体图标在 Firefox 和 IE 中没有对齐，但在 MacOS 上的 Chrome 和 Opera 和 Safari 中它们是对齐的。这是我想针对这两个浏览器的目标之一。另一个是“CAMPANHAS”部分中缺少下载图像/链接。
当我查看页面时，这些图标在 Chrome 中肯定是不对齐的。他们有各种相互冲突的风格。最好的办法是修复你的 CSS，而不是尝试破解浏览器。
请不要定位特定的浏览器。相反，请解释您正在尝试做什么，Chrome 与 IE/Firefox 有何不同，我们可以改为采用非黑客跨浏览器方法。

标签： javascript css internet-explorer firefox

【解决方案1】：

似乎对我有用：

// Firefox debug
@-moz-document url-prefix() {
    #id {rules: argument;}
    ...
}

// IE debug
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .class {rules: arg;}
    ...
}

【讨论】：

【解决方案2】：

确保您的浏览器特定 CSS 位于 CSS 文件的底部。例如，它应该位于 HTML 中 head 标签的底部，而对于 moz，请确保它位于 CSS 文件的底部。

【讨论】：

CSS 在文件的底部。那个 IE 部分也在 HEAD 的底部。例如，现在我在 Mozilla 标识符中有 h1 {color: red;} 并且它不起作用，当我执行“检查元素”时，它甚至没有出现被覆盖的规则。这是网站：link。您可以在“PRODUTOS”中找到 H1 标签，该文本在 Firefox 中当前是白色的，并且在该规则下应该是红色的（这只是我现在放在网上的一个示例规则）
@DavidMatos 当你说“它不起作用”时，你想究竟做什么？你怎么知道？你希望它看起来像什么？页面的哪一部分出错了？
@DavidMatos 在那些<h1> 标签的情况下，规则是工作 - 只是你有另一个更具体的规则覆盖它。
我现在看到 h1 在我检查元素时出现了（之前没有出现，我不知道为什么现在出现了）。但是当我尝试添加我真正想要的规则时，它并没有出现，即： .shareaholic-share-buttons-wrapper { margin-top: 14px !important; }。如果我在检查器中添加规则，这个边距有效，但是当我把它放在 CSS 中时没有任何反应。
h1 不如 .produtos-text h1 具体，将您的 moz 特定 css 更改为 .produtos-text h1 { color: red; } 并且它会工作。