用浏览器前缀覆盖CSS

时间:2015-01-15 08:54:28

标签: css vendor-prefix

我的页面在使用Safari的pageload上有显示问题(显示内联块元素的宽度为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),所以我使用标准显示:inline"。)

希望你知道我的意思吗? :)

1 个答案:

答案 0 :(得分:3)

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

例如,Google Chrome支持-webkit-inline-box并将使用此代替inline-block。我的头顶webkit-inline-box基于旧的Flexbox规范的过时版本。

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