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

【问题标题】：CSS table and max-width in Chrome not workingChrome中的CSS表和最大宽度不起作用
【发布时间】：2012-08-27 07:19:44
【问题描述】：

这是我的 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 像素宽度的视口……就像我想要的那样。但是在 Chrome 中，只有当视口宽于 50em 时，表格才显得正常。如果我缩小 Chrome 窗口，表格的右侧会溢出。

Chrome 这样做有什么原因吗？

【问题讨论】：

标签： css google-chrome firefox css-tables

【解决方案1】：

我能够使用 mixin(SASS) 来解决这个问题。

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

【讨论】：

【解决方案2】：

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

【讨论】：

这就是我这些天所做的，但是通过这样做我需要再次设置宽度。无论如何让没有固定最小和最大宽度的旧 css 工作？

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

来自 MSDN 文档：

最小宽度/最大宽度属性适用于浮动和绝对定位块和行内块元素，以及一些内在的控制。它们不适用于不可替换的内联元素，例如表行和行/列组。（“替换”元素具有内在的尺寸，例如 img 或 textArea。）

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

max-width property

MSDN Doc

【讨论】：

正是我需要的，谢谢！显示表在 Chrome 中完美运行 :)