如何調試由CSS規範中未涵蓋的聲明組合導致的不一致？

下面的兩個屏幕截圖顯示了Chrome 31（左側）和Safari 6對相同HTML + CSS的再現（本文末尾給出）之間的巨大差異。該頁面可能被查看here。 NB：這個頁面沒有使用JS。如何調試由CSS規範中未涵蓋的聲明組合導致的不一致？

enter image description here

這種廣泛差異的一個可能的解釋是，該頁面的樣式表包括一些組合未覆蓋的CSS規範聲明，這意味着每個瀏覽器也可以自由解釋它隨意。（在這種情況下，例如，將「外的規格組合」可以是一對聲明max-width: 400px;的和display:table;爲.main選擇器。）

問題：有一些自動化的方式來檢測此類「OUT-規範「的聲明組合？

這是值得指出的是，這裏給出的例子可能是相對容易通過檢查（至少對於有人用CSS規範的一個非常徹底的命令）來診斷，但它是無彈力想象情況，即這種「超出規格」的組合可能會更微妙地出現（例如通過單獨樣式表中的聲明之間的交互等）。因此，識別這種「不合規」組合的一些工具將是一個巨大的幫助。

我能想到的唯一工具就是CSS Lint，但它沒有在CSS中提取任何可能導致修復上述差異的東西。

*{ 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
      box-sizing:border-box; 
    margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
    font-family:consolas,monaco,courier,monospace; 
} 

.banner{ 
    background:lightgray; 
} 
.header{ 
    height:50px; 
} 
.footer{ 
    height:300px; 
} 

.main{ 
    position:relative; 
    max-width:400px; 
    margin:0 auto; 
    padding:10px; 
    display:table; 

    background-color:steelblue; 
} 

.left-panel{ 
    position:absolute; 
    background-color:#555; 
} 
.vfloat{ 
    position:absolute; 
    padding:10px 30px; 
    background-color:#0aa; 
    font-size:15px; 
} 

.right-panel{ 
    margin-left:200px; 
} 
.vfixed{ 
    padding:20px 60px; 
    background-color:orange; 
    font-size:30px; 
}

<div class="header banner"></div> 

<div class="main"> 

    <div class="left-panel"> 
    <div class="vfloat"><p>Donec laoreet, justo eget luctus pulvinar, nulla mauris facilisis massa, sit amet egestas lacus erat eu felis. In at urna eu elit dictum porttitor. Ut dictum justo nec urna mattis, ut pharetra mauris adipiscing. Pellentesque lacinia turpis id vulputate commodo. Nullam fringilla justo vitae consequat euismod.</p></div> 
    </div> <!-- .left-panel --> 
    <div class="right-panel"> 
    <div class="vfixed"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque magna lacus, sed porttitor tortor ultricies ut. Quisque tellus lectus, tincidunt et elementum a, viverra non diam.</p></div> 
    </div> <!-- .right-panel --> 

</div> <!-- .main --> 

<div class="footer banner"></div>

來源

2013-12-21 kjo

就像一個旁註，奇怪的是我在Safari 6.1中獲得了這個：[截圖]（http://i.imgur.com/QJiuM2N.jpg） – janfoeh

-2

您有display:table的容器。因此，您應該具有display:table-row和display:table-cell的元素。但是你沒有。然後你想知道它爲什麼會變得奇怪...

來源

2013-12-21 12:14:17

除了事實上，你沒有試圖回答被問到的問題，這種特殊情況有[非常明確的行爲]（http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes）。 – BoltClock

如何調試由CSS規範中未涵蓋的聲明組合導致的不一致？

回答

相關問題