小编典典

没有单位的CSS属性的后备

css

考虑以下场景,其中CSS属性缺少单位(px,em,pt,%):

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

问题:

  1. 为什么会退回给px?像素始终是首选单位吗?W3C工作草案或建议中是否定义了任何规则?
  2. 是否有一条规则使UA必须回退到首选单位?
  3. 给定以上示例,以下哪项是正确的行为:
    • Internet Explorer:在Quirks模式(IE6,5,4 ..)中,宽度和边框宽度用于回退到px。由于IE7(直到现在,IE10RP),如果缺少单位,它将忽略整个规则。因此,这两个规则都被忽略了。
    • Firefox 13:在上面的示例中,宽度回退为px,但是border-width被忽略了。
    • Chrome 19,Opera 12,Safari 5.1.2:宽度和边框宽度均退回到px。

注意:在Microsoft-Connect上,他们说:

您要报告的问题是设计使然。在标准模式下,IE10会忽略没有符合CSS标准的单位的宽度或高度。 该单元不是可选的。


阅读 502

收藏
2020-05-16

共1个答案

小编典典

我在您的HTML中看不到doctype声明,因此我只能假设您的测试页是以怪癖模式呈现的。

  1. 为什么会退回给px?像素始终是首选单位吗?W3C工作草案或建议中是否定义了任何规则?

它只会退回到px怪癖模式(并且我相信仅适用于某些属性)。是的,px是首选的后备广告单元。这回溯到旧版HTML
widthheight接受像素长度作为无单位数的属性。

  1. 是否有一条规则使UA必须回退到首选单位?

不,因此您观察到不一致的行为。但是,在标准模式下,UA需要忽略不带单位的长度值。如引用的Microsoft Connect中所述,该单元不是可选的。

在CSS2.1中,所有非零长度值都必须具有单位。

  1. 给定以上示例,以下哪项是正确的行为:

    * Internet Explorer:在Quirks模式(IE6,5,4
    

    ..)中,宽度和边框宽度用于回退到px。由于IE7(直到现在,IE10RP),如果缺少单位,它将忽略整个规则。因此,这两个规则都被忽略了。
    * Firefox 13:在上面的示例中,宽度回退为px,但是border-width被忽略了。
    * Chrome 19,Opera 12,Safari 5.1.2:宽度和边框宽度均退回到px。

同样,基于您的页面处于怪异模式的假设,我只能说,虽然规范中提到了怪异行为,但规范中并未定义此类怪异行为的具体细节(无论是显而易见的还是非怪异的,很明显的原因)。

我猜微软会改变IE7 +中的怪癖模式行为,以反映无单位值的标准行为,因为怪癖模式存在于 所有浏览器中 (IE
<6除外),并且是由相同的不正确doctype或缺少doctype触发的。据我所知,标准模式下的行为没有改变。

2020-05-16