没有单位的 CSS 属性:回退到 PX
在 CSS 中,从属性值中省略单位似乎很方便。但是,这样做可能会导致意外的回退情况。在怪异模式下,浏览器在遇到无单位属性时可能表现不一致。本文研究了回退行为、其含义以及跨浏览器的不一致。
回退到 PX
当 CSS 属性缺少单位(例如“px”)时, “em”或“%”,浏览器可能默认为后备单位。在怪异模式下,许多浏览器选择“px”作为后备单位。此行为与接受像素长度作为无单位值的旧版 HTML 属性一致。
但是,此行为在不同浏览器中并不一致。某些浏览器(例如标准模式下的 Internet Explorer 7 及更高版本)会忽略缺少单位的规则属性,而其他浏览器(例如 Chrome、Firefox 和 Safari)则继续回退到“px”。
W3C 规范
CSS 的 W3C 规范规定所有非零长度值必须有单位。因此,无单位属性无效。本规范适用于标准模式渲染。在怪异模式下,浏览器可以更自由地实现怪异行为,这可以解释回退行为的变化。
强制回退规则
没有强制执行的特定规则浏览器回退到首选单位。此决定由浏览器自行决定,并且可能会根据浏览器版本、渲染模式和涉及的特定属性而有所不同。
示例行为
互联网Explorer 在怪异模式和标准模式下的行为有所不同。在怪异模式下,它用于将宽度和边框宽度回退到“px”。但是,在标准模式下,它会忽略缺少单位的属性规则。
Firefox 与 Internet Explorer 的不同之处在于怪异模式。它将宽度回落到“px”,但忽略边框宽度属性。 Chrome、Opera 和 Safari 在怪异模式下都将 width 和 border-width 回退为“px”。
结论
不鼓励在 CSS 中使用无单位属性。它可能会导致意外结果和浏览器不一致,尤其是在怪异模式下。遵守为所有长度值指定单位的 W3C 建议将确保跨浏览器的一致渲染。
以上是问:当 CSS 属性在 Quirks 模式浏览器中缺少单位时会发生什么?的详细内容。更多信息请关注PHP中文网其他相关文章!