2

我的页面在使用 Safari 进行页面加载时出现显示问题（显示 inline-block 元素的宽度为 0，在一个 JS 内联样式之后它很好）。我可以用这种额外样式为我的 span 元素解决问题：

display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix

我必须首先使用标准，然后再使用我的修复。在当前浏览器版本上，它看起来很适合 FF、IE 9-11、Chrome 和 Safari（桌面 Mac）。

我现在的问题是：订单是否正常，或者我可以在某些浏览器上遇到问题吗？（也许浏览器认为：“哦，我必须使内联元素（跨度）显示：inline-block”。下一行“哦，我不知道该属性（-webket-inline-flex），所以我使用标准显示：内联”。）

希望你明白我的意思？:)

4

1 回答 1

3

顺序很好，但是你会发现任何支持的浏览器-webkit-inline-box都会使用它inline-block。这可能会导致问题，因为浏览器前缀版本的实现方式可能无法反映非浏览器前缀版本的实现方式。

例如，谷歌浏览器支持-webkit-inline-box并将使用它而不是inline-block. 我webkit-inline-box想到的是基于旧的过时版本的 Flexbox 规范。

也许更好的解决方案是弄清楚为什么 Safari 将您的inline-block元素的宽度设置为 0。这不是我亲眼目睹的行为，但 Safari 通常不在我测试的生产浏览器范围内。

于 2015-01-15T09:07:57.453 回答