mac上的瀏覽器之間的字體大小不一致

在以下示例中，它是一個導航欄。它的元素的寬度是可變的，它們的寬度之和是它們的容器的寬度，元素是ul。問題是，每個元素在所有的Windows瀏覽器上都有相同的寬度，它們的寬度總和爲379px。但是在Mac上，每個瀏覽器似乎都會使字體略有不同，導致寬度增加或減少，因此最後一個元素換行到第二行。mac上的瀏覽器之間的字體大小不一致

<html> 
<head> 
<style> 
body {margin:0;padding: 0;} 
ul {margin:0;padding:0;list-style-type: none;} 
.nav { 
    width:379px; 
} 
.nav li { 
    float: left; 
    margin: 5px; 
    padding: 20px; 
    background-color: #0099ff; 
    color: white; 
    font-family: Arial; 
    font-size: 16px; 
} 
</style> 
</head> 
<body> 
    <ul class="nav"> 
     <li>asdf</li> 
     <li>qwer</li> 
     <li>test 1</li> 
     <li>testing test</li> 
    </ul> 
</body> 
</html>

問題是，如何通過指定字體大小來保證每個元素在所有瀏覽器上的寬度。

來源

2013-11-25 MMSs

首先，驗證您的HTML。你有一些問題，比如缺少DOCTYPE。我也推薦使用HTML5BOILERPLATE來完成很多規範化。

下一頁：爲什麼你的寬度取決於字體大小？將字體大小設置爲靜態併爲元素設置一定的靜態寬度不是更好嗎？
如果您擔心此行爲會導致在小屏幕（移動設備）上發生問題，您應該閱讀有關響應式佈局。他們利用媒體查詢根據特定規則使用替代CSS。

來源

2013-11-25 08:01:57

好的，謝謝你的建議。雖然，DOCTYPE在這裏不是問題。寬度取決於字體大小以避免文本兩側的填充大小不同。 – MMSs

-1

如果你不能得到它的工作，它將是一個相當簡單的加載文本的.png與透明背景。

來源

2013-11-25 08:09:48 izaic3

使用文本時，設置固定寬度的div加上填充大小是棘手的。您不可能在所有主流瀏覽器和平臺上獲得一個字符串來呈現完全相同的大小。雖然你可以非常接近;這裏有一些建議。

指定px值，而不是pt或em。這些文本將呈現相同的大小，而不管設備分辨率如何，並且在放大和縮小時仍將適當縮放。
使用非常常見的字體或Web字體。您可以使用字體松鼠剝離下來的版本特定的字體，你想使用
精確設置font-smoothing方法
使用計算的CSS屬性基礎上，以抵消letter-spacing由一小部分結果div寬度與目標不同。這將是準確的，但也複雜和更兼容
使用JavaScript做上述計算代替，導致更多的代碼兼容
渲染一些PNG圖像預先，或者服務器端的在運行時

下面是一些示例代碼，說明了獲得更一致的跨平臺Arial文本呈現的一種方法。

html, body { 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

來源

2014-11-12 22:44:41 Beejor

mac上的瀏覽器之間的字體大小不一致

回答

相關問題