用浏览器前缀覆盖 CSS答案

【问题标题】：Override CSS with browser prefix用浏览器前缀覆盖 CSS
【发布时间】：2015-01-15 08:54:27
【问题描述】：

我的页面在使用 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），所以我使用标准显示：内联”。）

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：