用浏览器前缀覆盖 CSS
Override CSS with browser prefix
我的页面在使用 Safari 加载页面时存在显示问题（显示内联块元素的宽度为 0，在一个 JS 内联样式之后它很好）。我可以为我的 span 元素使用这个额外的样式来解决这个问题：
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
我必须先使用标准，然后再使用我的修复程序。在当前的浏览器版本上，它看起来适合 FF、IE 9-11、Chrome 和 Safari（桌面 Mac）。
我现在的问题是：订单是否正常，或者某些浏览器是否会出现问题？
（也许浏览器认为："Oh I have to make the inline element (span) to display:inline-block"。下一行 "Oh I dont know that property (-webket-inline-flex), so I use the standard display: inline"。）
希望你明白我的意思？ :)
顺序没问题，但是你会发现任何支持-webkit-inline-box的浏览器都会在inline-block上使用这个。这可能会导致问题，因为浏览器前缀版本的实现方式可能无法反映非浏览器前缀版本的实现方式。
例如，Google Chrome 支持 -webkit-inline-box 并将使用它来代替 inline-block。我没想到 webkit-inline-box 是基于旧的过时版本的 Flexbox 规范。
也许更好的解决方案是弄清楚为什么 Safari 将 inline-block 元素的宽度设置为 0。这不是我亲眼目睹的行为，但 Safari 通常不在生产浏览器范围内我在测试。
我的页面在使用 Safari 加载页面时存在显示问题（显示内联块元素的宽度为 0，在一个 JS 内联样式之后它很好）。我可以为我的 span 元素使用这个额外的样式来解决这个问题：
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
我必须先使用标准，然后再使用我的修复程序。在当前的浏览器版本上，它看起来适合 FF、IE 9-11、Chrome 和 Safari（桌面 Mac）。
我现在的问题是：订单是否正常，或者某些浏览器是否会出现问题？ （也许浏览器认为："Oh I have to make the inline element (span) to display:inline-block"。下一行 "Oh I dont know that property (-webket-inline-flex), so I use the standard display: inline"。）
希望你明白我的意思？ :)
顺序没问题，但是你会发现任何支持-webkit-inline-box的浏览器都会在inline-block上使用这个。这可能会导致问题，因为浏览器前缀版本的实现方式可能无法反映非浏览器前缀版本的实现方式。
例如，Google Chrome 支持 -webkit-inline-box 并将使用它来代替 inline-block。我没想到 webkit-inline-box 是基于旧的过时版本的 Flexbox 规范。
也许更好的解决方案是弄清楚为什么 Safari 将 inline-block 元素的宽度设置为 0。这不是我亲眼目睹的行为，但 Safari 通常不在生产浏览器范围内我在测试。