Question

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

火狐：

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

铬：

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

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

Answer 1

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
    font-size: .85em 
 }
}

Answer 2

您可以使用以下css hacks单独定位浏览器：

@-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和其他任何浏览器都是一样的

Answer 3

我遇到类似的问题，iPad上的Safari与台式机上的Safari之间的问题更为棘手，显示出16px小型大写的不同规模。出于某种原因，小型大写在iPad上的尺寸更大，有点像Firefox。

调整字体大小或字母间距减半左右，可以在不进一步增加黑客的情况下缓解问题。通过基本上找到一个微小的中间调整，触发一个浏览器而不是另一个浏览器，尝试尽可能接近。

我在Firefox和IE中观察到的是，字体往往会扩展到比Webkit更多的中间大小。例如，在IE和Firefox中，15.6px比15.5px更小或使用更多跟踪来调整，因此是15.7px，15.8px等。几乎每0.1像素差异。而在Safari中，差异仅在每0.4px左右被感知到。

对于我在这里造成溢出问题的小型大写字母，我使用了15.5px，这与Safari（桌面）上的16px差别不大，但是尽可能接近IE和Firefox的小型大小。 Safari的。

font-variant：small-caps;使用Chrome或Firefox显示不同的字体大小

3 个答案: