Chrome 中的 CSS 表和最大宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12232858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS table and max-width in Chrome not working
提问by TM23
This is my CSS code;
这是我的 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;
}
And my HTML code;
还有我的 HTML 代码；
<div id="cont">
<div id="css-table">
<div class="col">123</div>
<div class="col">123</div>
</div>
</div>
When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.
当我缩放 Firefox 窗口时，表格可以很好地缩放到 300px 宽度的视口......就像我想要的那样。但是在 Chrome 中，只有当视口宽于 50em 时，表格才会看起来正常。如果我缩小 Chrome 窗口，桌子会在包装的右侧流血。
Is there a reason why is Chrome doing this?
Chrome 这样做有什么原因吗？
采纳答案by blasteralfred Ψ
Create a div and give it a styling to display block and a max width. You may use traditional <table>and give it a styling of 100% width.
创建一个 div 并为其设置样式以显示块和最大宽度。您可以使用传统<table>并为其设置 100% 宽度的样式。
回答by DigTheDoug
Technically Chrome is following the rules because max-width should only apply to block elements.
从技术上讲，Chrome 遵循规则，因为max-width 应仅适用于块元素。
From MSDN docs:
来自 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.)
min-width/max-width 属性适用于浮动和绝对定位块和内联块元素，以及一些内部控件。它们不适用于非替换内联元素，例如表格行和行/列组。（“替换”元素具有内在尺寸，例如 img 或 textArea。）
The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:tableor the max-width.
表格（或在您的情况下显示：表格）在技术上应该不起作用或得到支持。FF显然服从它很好，但你可能需要拿出另一种解决方案，无论是去除显示：表或最大宽度。
回答by Iftah
The solution I found was using table-layout: fixedand width: 100%
我发现的解决方案是使用table-layout: fixed和width: 100%
回答by monkeyshoulders
I was able to use a mixin(SASS) to fix the issue.
我能够使用 mixin(SASS) 来解决这个问题。
@mixin clearfix {
&::after{
content: "";
display: table;
clear: both;
}
}
