8 
font-variant: small-caps;
font-size: 12px;

火狐：

  • 大写字母：12px
  • 小写字母：10px

铬合金：

  • 大写字母：12px
  • 小写字母：8px

如何在不使用 JavaScript 的情况下协调它？

4

3 回答 3

4

Webkit 浏览器显示的小型大写字母比其他浏览器要小，因此.. 您可以使用 CSS 媒体查询轻松嗅出 Chrome 和 Safari 等 Webkit 浏览器。尝试这样的事情：

@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
    font-size: .85em 
 }
}
于 2013-10-15T21:32:53.120 回答
0

您可以使用这样的 css hack 单独定位浏览器：

@-moz-document url-prefix() {
  //firefox specific css here
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //chrome specific css here - this will also hit other webkit browsers like safari tho
}

然而，在我看来，一个更好的方法涉及一点点 javascript，它检测浏览器并在 html 元素上设置一个类，然后您可以使用该类作为定位各个浏览器的基础。

最后它看起来像这样：

<html class="firefox">
...
</html>

.firefox .rulename {
  //firefox specific css here
}

当然对于 chrome 和其他浏览器也是如此

于 2011-09-28T20:44:51.553 回答
0

我在 iPad 上的 Safari 和台式机上的 Safari 之间遇到了类似的问题，在 16 像素时显示了不同的小型大写字母比例。出于某种原因，小型股在 iPad 上的尺寸更大，有点与 Firefox 相匹配。

调整字体大小或字母间距少半个像素左右，可以缓解问题，而无需进一步的额外修改。通过本质上找到一个在一个浏览器上触发但在另一个浏览器上不触发的微小中间调整，以尝试尽可能接近。

我在 Firefox 和 IE 中观察到的情况是，与 Webkit 相比，字体倾向于以更多的中间尺寸进行缩放。比如在 IE 和 Firefox 中，15.6px 比 15.5px 稍微大一点或者使用更多的跟踪来调整，15.7px、15.8px 等也是如此。几乎每 0.1 个像素都有差异。而在 Safari 中，只有每 0.4 像素左右才能感知到差异。

对于我在此处创建溢出问题的小型大写字母案例，我使用了 15.5 像素，这与 Safari（桌面）上的 16 像素几乎没有区别，但将 IE 和 Firefox 的小型大写字母尺寸尽可能减小到接近 Safari 的大小。

于 2013-04-10T04:34:07.353 回答