css - 具体 Mac 显示 : inline-block issue

Question

我遇到了一个特定 mac 的问题，它没有显示我正确构建的某个网站。我测试过的所有其他 mac 和 pc 都能正确显示网站，但是在所有浏览器中这个特定的 mac 显示不正确就像提到的那样，这在其他每台计算机上都能正确显示。

这里的问题是完全相同的问题，但似乎没有得到解决。

https://discussions.apple.com/thread/6650689?start=0&tstart=0

我知道我可以尝试漂浮，但我宁愿找到这个原因的路径，有人知道这可能发生的任何原因吗？

Answer 1

如果浏览器渲染仅在一台或几台机器上有所不同，则字体可能是罪魁祸首。确保所有计算机都使用相同的字体来呈现您的页面，实际上即使使用相同版本的字体也是如此。

随着时间的推移，许多字体会略有修改，通常字距调整(两个字符之间的间距)或提示(描述字体的曲线应如何映射到屏幕上的像素)可能会发生变化，从而导致非常细微的差异一些文本在显示时占用的宽度。

如果字体版本确实是罪魁祸首:请记住，您页面的访问者也可能使用这种“不良”版本的字体。因此，建议尝试改进您的 HTML 布局。

我经常观察到，将几个百分比留空有助于解决此类字体问题。例如:有一个 div (width=100%) 在每个“行”中包含两个元素，第一个是大约 1/3 宽度的标签，第二个是一些控件，占用其余的空间。将它们定义为 width:33% 和 width:67% 通常会导致第二部分位于第一部分下方而不是彼此相邻。将宽度更改为 width:32% 和 width:65% 通常可以解决此问题，因为它允许浏览器在布局元素时出现一些舍入错误。