是什麼導致IE/FF崩潰寬度：0表內嵌入塊但Chrome/Opera不行？

在this question and answer我們發現了Blink和Firefox/IE之間的一個有趣的區別。規範的哪一部分涉及這個問題以及誰正在做的正確？是什麼導致IE/FF崩潰寬度：0表內嵌入塊但Chrome/Opera不行？

假設您有一個有1列和2行的表格。第1行有一串內聯文本，第2行有一個固定寬度的塊。

<table> 
    <tr> 
     <td> 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div class="fixed-width"></div>   
     </td> 
    </tr> 
    </table>

與

.fixed-width { 
    background-color: salmon; 
    height: 200px; 
    width: 200px; 
} 

table { 
    width:0; 
}

Jsbin demonstrating this.

Chrome和Opera會忽略width: 0，擴大到100％

Chrome ignores width setting

Firefox和IE 11將摺疊表像寶一樣寬ssible。

IE 11 tries its best to apply it

這是閃爍/ WebKit的或IE/FF缺少規範的情況？這種行爲是未指定的嗎？

來源

2014-01-25 George Mauer

爲'table'設置'display：block;'修復了Chrome中的錯誤。 – mdesdev

僅僅是一種預感，我沒有太多的睡眠，所以只要將它作爲表面值就可以了，但是縮放擬合算法（根據定義的CSS 2.1規範實現）會發揮作用[內嵌塊未替換元素]（http://www.w3.org/TR/CSS2/visudet.html#inlineblock-width），我認爲表格單元符合規範。所以我猜想「行爲沒有說明」。 – bishop

不是非常有用，但如果在寬度爲0的容器中，它的行爲應該像它應該的那樣。 http://jsbin.com/UhOQEzOz/1/edit（display + div），http://jsbin.com/UlOhEGI/1/edit（表格） –

表規格說If the width attribute is not set, a table takes up the space it needs to display the table data.只需webkit計算它需要100％的可用寬度在單元格內顯示長文本（沒有人說它應該採取最小寬度 - 這樣細胞高度會增加）。由於你的表格寬度不能被應用，所以沒有被考慮。在上面的例子中，如果您使用：

table { 
    width: 300px; 
}

比它將應用。如果你不想設置表格的寬度，但想保持它的小，因爲它可以比應用樣式表細胞來代替：

table td { 
    width: 1px; 
}

這看起來除了IE7所有的瀏覽器好。

來源

2014-02-11 13:42:19 skobaljic

哪個表規範？ – BoltClock

除了表格寬度**是**設置 - 它被設置爲0.有關將樣式應用於'td'的公平點[此作品適用於Chrome瀏覽器]（http://jsbin.com/UVAnUqEr/11/ ）。你能鏈接到你所在的表格規格嗎？我仍然不確定哪種行爲是正確的還是沒有說明的？ –

你可以在這裏找到表定義和用法：http://www.w3schools.com/tags/att_table_width.asp零寬度不能應用到表 - 它不是一個塊元素，它會自動擴展到'採取增加顯示錶格數據所需的空間 – skobaljic

是什麼導致IE/FF崩潰寬度：0表內嵌入塊但Chrome/Opera不行？

回答

相關問題