html - 为 Chrome 和 Firefox 破解 css 字体大小

Question

我知道每个浏览器都有默认的 css。

我有一个网站标题，我想在每个浏览器中定义不同的字体大小。

所以我有这样的风格:

.FontSize { 14px; }

和这个元素:

<span class="FontSize">text</span>

对于 Chrome 我想设置:

font-size: 12px;

对于 firefox 我想设置:

font-size: 12px;

我读到我破解了 css，所以这是我的 css 文件:

CSS 文件:

.FontSize { 14px; }

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .FontSize {font-size:12px;}
}

/* Firefox */
@-moz-document url-prefix() { 
  .FontSize {
     font-size:12px;
  }
}

但它不会改变这些浏览器(Chrome 和 Firefox)中的字体大小。

感谢任何帮助!

Answer 1

仅适用于 chrome css:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .FontSize  { font-size: 12px; }
}

仅适用于 firefox css:

.FontSize,  x:-moz-any-link  { font-size: 12px; }

您的代码段中存在轻微错误。上面提到的将解决您的问题。

阅读 Paul Rish 的 Browser CSS hacks更多技巧。