仅适用于 Opera、Safari 和 Chrome 的 CSS 样式表答案

【问题标题】：CSS stylesheet for Opera, Safari and Chrome only仅适用于 Opera、Safari 和 Chrome 的 CSS 样式表
【发布时间】：2012-06-27 20:05:26
【问题描述】：

我正在使用在 IE 和 Firefox 上运行良好的代码：

 .tytulmalykom {
    color:#666666;
    font-size:11px;
    font-variant:small-caps;
}

我想将此代码仅用于 Opera、Safari 和 Chrome：

 .tytulmalykom {
    color:#666666;
    font-size:11px;
    text-transform:uppercase;
}

我所有的样式表都在 stylesheet.css 文件中。

到目前为止，我使用了很多链接 rel：

<link rel="stylesheet" href="files/stylesheet.css" type="text/css" />
<![if !IE]><link rel="stylesheet" type="text/css" href="files/firefox.css" media="screen" /><![endif]>
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="files/ie7.css" /><![endif]-->

【问题讨论】：

如果这是你唯一的风格，为什么不在你的 IE css 和 FF css 中覆盖 text-transform 呢？默认情况下，Opera、Safari 和 Chrome 会获取样式。
搜索css hacks得到类似developer.mozilla.org/en/CSS/@document的结果
我不工作。我已将第二个代码添加到 ie7.css 和 firefox.css 中，并且仍在使用 text-transform:uppercase。
只需添加 text-transform: none;到您的 IE 和 FF 样式。
我已经添加了text-transform:none 和开头一样。火狐，IE都可以，其余的还在用small-caps。

标签： google-chrome css safari opera

【解决方案1】：

这是我为解决这个问题所做的：

我在每一页都添加了：

<style type="text/css">

@-moz-document url-prefix() { 
    .tytulmalykom { font-variant:small-caps; text-transform:none }
}
</style>

然后

在 stylesheet.css 中：

.tytulmalykom {
    color:#666666;
    font-size:11px;
    text-transform:uppercase;
}

和ie7.css：

.tytulmalykom {
    font-variant:small-caps;
}

firefox.css 中不需要其他任何东西

【讨论】：