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窗口时，表格甚至可以缩小到300px宽度视口......就像我想要的那样。但在Chrome中，只有当视口宽度超过50em时，该表才正常。如果我缩小Chrome窗口，那么桌子会在包裹的右侧渗出。

Chrome有没有理由这样做？

Answer 1

从技术上讲，Chrome遵循规则，因为 max-width应仅适用于块元素。

来自MSDN文档：

min-width / max-width属性适用于浮动和绝对定位块和内联块元素，以及一些内在的元素控制。它们不适用于未替换的内联元素，例如表行和行/列组。（“被替换”元素具有内在性维度，例如img或textArea。）

表格（或在您的情况下显示：表格）在技术上应该不起作用或不受支持。 FF显然服从它很好，但你可能需要提出另一个解决方案，要么删除 display：table 或 max-width 。

max-width property

MSDN Doc

Answer 2

我找到的解决方案是使用table-layout: fixed和width: 100%

Answer 3

创建一个div并给它一个样式来显示块和最大宽度。您可以使用传统的<table>并为其设置100％宽度的样式。

Answer 4

我能够使用mixin（SASS）解决问题。

 @mixin clearfix {
   &::after{
    content: "";
    display: table;
    clear: both;
   }
 }

Chrome中的CSS表和最大宽度无法正常工作

4 个答案: