鉻與盒大小：邊界盒中顯示：表

我正在使用display:table小2面板佈局。對於間距（也來自背景圖像），我使用padding。當我需要孩子具有的可用空間的精確width:50%（以父div的填充方面），我用box-sizing:border-box。鉻與盒大小：邊界盒中顯示：表

這正常的歌劇，但在Chrome中box-sizing:border-box甚至-webkit-box-sizing:border-box被忽略。

我做了一個演示，顯示的問題。兩個紅色箱子應該是廣場和藍色的盒子應該是200像素的寬度和高度：http://jsfiddle.net/fabb/JKECK/

這裏的HTML源代碼：

<div id="table"> 
    <div id="left"> 
     Something on the left side 
    </div>  
    <div id="right"> 
     Something on the right side 
    </div> 
</div>

而CSS：

#table { 
    display: table; 
    /*border-collapse: collapse;*/ 

    width: 200px !important; 
    height: 200px !important; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid blue; 
    padding: 60px 20px; 
} 

#table #left, #table #right { 
    display: table-cell; 

    width: 50%; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid red; 
    padding: 0; 
}

這是一個Chrome中的錯誤？或者我做錯了什麼？

來源

2012-01-04 fabb

是，谷歌Chrome的bug：

Issue #103543 - CSS display: table bug

一些情況下可以通過addding /移除填充特定側（如在錯誤報告中的jsfiddle）來解決，但你的情況可能是不可能的。

它是通過使用浮動那裏，如果寬度和高度是已知的，你想多細胞更容易，更穩定。

注：因爲table佈局必須打破分配CSS width/height的能力，最好不要使用它，除非它是表狀結構，或者您想要的內容展開容器 - 讓你的!important在width & height不起作用。

來源

2012-01-04 17:06:55 vincicat

非常感謝您的**備註** - 它幫助我找到解決方法。我**從'＃table'中移除了'display：table'，這使得我的佈局可以在Chrome，Opera和Firefox中使用。有兩個缺點幸運地不影響我：1）單個單元格不再覆蓋整個高度，2）沒有其他'display：table *'應該在那裏，因爲它可能會干擾。你有任何額外的信息，**爲什麼**一個帶有'display：table'的元素可能會打破'width'或'height'屬性（在嘗試另一種解決方法時在Opera中遇到過這個問題）？ – fabb 2012-01-04 17:51:24

「表格寬度是易碎的」，這是因爲這是一種內聯塊模型（歷史原因 - 可能是人們更喜歡它可以基於內容進行擴展），請參閱規範鏈接[http：// www .w3.org/TR/CSS2/tables.html＃模型）。要解決此問題，您可以嘗試'表格的佈局：fixed' [鏈接更多的解決方案（http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/） – vincicat 2012-01-05 18:33:08

附：如果您希望單元格跨越整個高度，請嘗試使用flexbox：[webkit更新版本]（http://www.the-haystack.com/2012/01/04/learn-you-a-flexbox/）或[CSS3 flex盒子，支持的版本]（http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/） - – vincicat 2012-01-05 18:40:14

刪除用於瀏覽器的-webkit。

來源

2013-08-21 11:06:51

鉻與盒大小：邊界盒中顯示：表

回答

相關問題