Chrome 中的 CSS 表格和最大宽度不起作用

Question

这是我的 CSS 代码；

#wrap {
    width:50em;
    max-width: 94%;
    margin: 0 auto;
    background-color:#fff;  
}

#head {
    width:50em;
    height:10em;
    max-width: 100%;
    margin: 0 auto;
    text-align:center;
    position: relative;
}

#css-table { 
    display: table; 
    margin: 1em auto;
    position: relative;
    width:50em;
    max-width: 100%;            
}

#css-table .col { 
    display: table-cell; 
    width: 20em;
    padding: 0px;
    margin: 0 auto;
}

#css-table .col:nth-child(even) { 
    background: #fff;
}

#css-table .col:nth-child(odd) { 
    background: #fff;
    border-right: 4px double #b5b5b5;
}

还有我的 HTML 代码；

<div id="cont">
    <div id="css-table">
        <div class="col">123</div>
        <div class="col">123</div>
    </div>
</div>

当我缩放 Firefox 窗口时，表格可以很好地缩放到 300 像素宽度的视口(viewport)......就像我想要的那样。但在 Chrome 中，只有当视口(viewport)宽度大于 50em 时，表格才会看起来正常。如果我缩小 Chrome 窗口，表格的右侧会溢出。

Chrome 这样做有什么原因吗？

Answer 1

从技术上讲，Chrome 遵循规则，因为 ma​​x-width 应该只应用于 block 元素。

来自 MSDN 文档:

The min-width/max-width attributes apply to floating and absolutely positioned block and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table rows and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)

该表(或在您的情况下为 display:table)在技术上应该不起作用或不受支持。 FF 显然很好地遵守了它，但您可能需要想出另一种解决方案，删除 display:table 或 max-width。

max-width property

MSDN Doc