特定的 Mac 显示：inline-block 问题答案

【问题标题】：Specific Mac display: inline-block issue特定的 Mac 显示：inline-block 问题
【发布时间】：2017-11-29 02:58:27
【问题描述】：

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

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

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

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

【问题讨论】：

如何指定元素的宽度？也许它安装了您使用的不同版本的字体，但指标略有不同，从而导致了差异？
@cello 你是个天才，我删除了那台电脑上的字体，一切正常！谢谢你！如果你写了一个答案，我可以接受它是正确的:)

标签： css macos display

【解决方案1】：

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

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

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

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

【讨论】：