CSS属性缺失单位的回退方案

Question

CSS属性缺失单位的回退方案

19

考虑这样一种情况——CSS属性缺少单位（px、em、pt、%）：

<body>
    <div 
        style=  "width:170;
                border:1 dotted PaleGreen;
                background-color:MistyRose">
        The quick brown
    </div>
</body>

问题：

为什么要回退到像素(px)？像素(px)是否总是首选单位？W3C工作草案或建议中是否定义了任何规则？
是否有一条规则使UA必须回退到首选单位？
针对上述示例，以下哪种行为是正确的：
- Internet Explorer：在怪癖模式下（IE6,5,4..），宽度和边框宽度会回退到px。自IE7以来（直至现在，IE10RP），如果单位缺失，则整个规则将被忽略。因此，这两个规则都被忽略了。
- Firefox 13：在上述示例中，宽度回退到px，但边框宽度被忽略了。
- Chrome 19、Opera 12、Safari 5.1.2：宽度和边框宽度均会回退到px。

注意：在Microsoft-Connect上，他们说：

您报告的问题已经得到设计。IE10在标准模式下遵循CSS标准，无单位的宽度或高度将被忽略。单位不是可选的。

- vulcan raven

2个回答

1

px 是最常用的单位，因此通常浏览器会根据“常识”在没有指定单位时使用 px，因为它是 Web 设计中最常用的单位。
没有这样的规则。浏览器只是使用设计中最常用的单位。
理想的行为应该是使用 px 并继续使用其他样式，但没有这样的规则，所以当您看到不同的浏览器显示不同的东西时，它们实际上正在实现自己的逻辑来对抗这些错误，在这种情况下没有一个规则可以遵循。这取决于浏览器的操作方式。

您永远不应该依赖浏览器来纠正您的错误。始终依靠自己以获得更好的跨浏览器兼容性。

- Ashwin Singh

问题是由于缺少doctype引起的。 - vulcan raven

@Ashwin Singh，第一点正确吗？ - CodeForGood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

我没有在你的HTML中看到doctype声明，所以我只能假设你的测试页面是在quirks模式下呈现的。

为什么会回退到像素(px)？像素(px)是否总是首选单位？W3C工作草案或建议中是否有任何规定？

它只会在quirks模式下回退到px（而且我认为仅适用于某些属性）。是的，px是首选的回退单位。这追溯到传统的HTMLwidth和height属性，它们将像素长度作为无单位数字进行接受。
是否有规则要求UA必须回退到首选单位？

没有规则，因此您观察到的行为不一致。但在标准模式下，UA需要忽略没有单位的长度值；单位不是可选的，正如您引用的Microsoft Connect中所提到的那样。

在CSS2.1中，所有非零长度值都必须有单位。
根据上面的示例，以下哪种行为是正确的：
- Internet Explorer：在Quirks模式下（IE6,5,4..），width和border-width会回退到px。自从IE7以来（直至现在的IE10RP），如果单位缺失，它将忽略整个规则。因此两个规则都被忽略了。
- Firefox 13：在上面的示例中，width回退到px，但border-width被忽略了。
- Chrome 19、Opera 12、Safari 5.1.2：width和border-width都会回退到px。
同样地，基于你的页面处于quirks模式的假设，我只能说，尽管规范提到了古怪的行为，但这种古怪行为的具体细节在规范中并没有定义（出于明显和不太明显的原因）。
我猜测微软在IE7+中改变了怪异模式的行为，以反映无单位值的标准行为，因为怪异模式存在于所有浏览器（除了IE<6），并且会以相同的不正确文档类型或缺少文档类型来触发。据我所知，标准模式的行为没有改变。