我的页面在使用 Safari 进行页面加载时出现显示问题(显示内联 block 元素的宽度为 0，在使用 JS 内联样式后就可以了)。我可以用我的 span 元素的这个额外样式来解决这个问题:
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
我必须首先使用标准，然后再使用我的修复。在当前的浏览器版本上，它看起来很适合 FF、IE 9-11、Chrome 和 Safari(Mac 桌面)。
我现在的问题是:顺序正常吗？或者我在使用某些浏览器时会遇到问题吗？ (也许浏览器会想:“哦，我必须让内联元素(span)显示:inline-block”。下一行“哦，我不知道那个属性(-webket-inline-flex)，所以我使用标准显示:内联”。)
希望你明白我的意思？ :)
最佳答案
顺序很好，但是你会发现任何支持-webkit-inline-box的浏览器都会使用它而不是inline-block。这可能会导致问题，因为浏览器前缀版本的实现方式可能无法反射(reflect)非浏览器前缀版本的实现方式。
例如，Google Chrome 支持 -webkit-inline-box 并将使用它而不是 inline-block。在我的脑海中，webkit-inline-box 是基于旧的过时版本的 Flexbox 规范。
也许更好的解决方案是弄清楚为什么 Safari 为您的 inline-block 元素提供 0 的宽度。这不是我亲眼所见的行为，但 Safari 通常不符合我测试的生产浏览器。
关于css - 使用浏览器前缀覆盖 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27959737/