Html 为什么 Firefox 和 Opera 会忽略 display: table-cell 中的 max-width？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2923710/
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
Why do Firefox and Opera ignore max-width inside of display: table-cell?
提问by brad
The following code displays correctly in Chrome or IE (the image is 200px wide). In Firefox and Opera the max-widthstyle is ignored completely. Why does this happen and is there a good work around? Also, which way is most standards compliant?
以下代码在 Chrome 或 IE 中正确显示（图像宽度为 200 像素）。在 Firefox 和 Opera 中，max-width样式被完全忽略。为什么会发生这种情况，是否有好的解决方法？此外，哪种方式最符合标准？
Note
笔记
One possible work around for this particular situation is to set max-widthto 200px. However, this is a rather contrived example. I'm looking for a strategy for a variable width container.
针对这种特定情况的一种可能解决方法是max-width将200px. 然而，这是一个相当人为的例子。我正在寻找可变宽度容器的策略。
<!doctype html>
<html>
<head>
<style>
div { display: table-cell; padding: 15px; width: 200px; }
div img { max-width: 100%; }
</style>
</head>
<body>
<div>
<img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
leo metus, aliquam eget convallis eget, molestie at massa.
</p>
</div>
</body>
</html>
[Update]
[更新]
As stated by mVChrbelow, the w3.org specstates that max-widthdoes not apply to inlineelements. I've tried using div img { max-width: 100%; display: block; }, but it does not seem to correct the issue.
正如下面的mVChr所述，w3.org 规范指出这max-width不适用于inline元素。我试过使用div img { max-width: 100%; display: block; }，但它似乎不能解决问题。
[Update]
[更新]
I still have no solution for this issue. However, I am using the following javascript hack to fix my problems. Essentially, it recreates the situation above and checks if the browser supports max-widthwithin display: table-cell. (Using a data uri prevents an extra http request. The one below is a 3x3 bmp.)
对于这个问题，我仍然没有解决方案。但是，我正在使用以下 javascript hack 来解决我的问题。从本质上讲，它重新创建浏览器是否支持上述情况，并检查max-width内display: table-cell。（使用数据 uri 可以防止额外的 http 请求。下面是一个 3x3 bmp。）
jQuery( function ( $ ) {
var img = $( "<img style='max-width:100%' src='" +
"data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA" +
"AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//" +
"/wAAAAAAwAAAAKAAAAA%3D" +
"'>" )
.appendTo(
$( "<div style='display:table-cell;width:1px;'></div>" )
.appendTo( "body" )
);
$.support.tableCellMaxWidth = img.width() == 1;
img.parent().remove();
});
采纳答案by mVChr
The w3.org specstates that max-width does not apply to inline elements, so you will get inconsistent behavior across browsers. I'm not sure of your intended outcome, but you may achieve it if you set div img { display:block }and then align the imgand ptags with floats instead of standard inline.
该w3.org规范指出，最大宽度并不适用于内联元素，所以你会得到跨浏览器的行为不一致。我不确定您的预期结果，但是如果您设置div img { display:block }然后将img和p标记与浮动而不是标准内联对齐，您可能会实现它。
回答by Alex
What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: tableandtable-layout: fixed. That makes both Firefox and Opera respect the max-widthrule.
您需要做的是将包装器 div（带有 的display: table-cell那个）放在另一个具有display: table和 的div 中table-layout: fixed。这使得 Firefox 和 Opera 都遵守max-width规则。
回答by Liina
I got it working by using width: 100%instead of max-width: 100%.
我通过使用width: 100%而不是max-width: 100%.
回答by Daniel Dogeanu
Setting width: 100% does fix the problem, but it introduces another one. In WordPress you don't want to set width: 100% to an image. What if the image is medium-size with a width of 300px, what then? I've been using classes to set the width to 50% on medium-size, but what if the image is smaller? Then it will get stretched. In webkit browsers it works with width: auto; max-width: 100%; but since Firefox, Opera and IE ignore that... that's a huge problem.
设置 width: 100% 确实解决了这个问题，但它引入了另一个问题。在 WordPress 中，您不想将 width: 100% 设置为图像。如果图像是宽度为 300px 的中等大小怎么办？我一直在使用类将中等大小的宽度设置为 50%，但是如果图像较小怎么办？然后它会被拉伸。在 webkit 浏览器中，它使用 width: auto; 最大宽度：100%；但由于 Firefox、Opera 和 IE 忽略了这一点……这是一个大问题。
回答by Hugo Silva
This has become a very confusing topic...
这已经成为一个非常令人困惑的话题......
Max-width doesn't work on inline elements neither in table-cell elements. It DOES work on an image if its display is set to block, but what is 100%? In a table layout, the content of a cell pushes the column width to accommodate all content as possible. So max-width:100%, inside a table cell ends up being the natural width of the content in most cases.
Max-width 不适用于内联元素，也不适用于表格单元格元素。如果将显示设置为阻止，它确实可以处理图像，但什么是 100%？在表格布局中，单元格的内容会推动列宽以尽可能容纳所有内容。因此，在大多数情况下，表格单元格内的 max-width:100% 最终会成为内容的自然宽度。
That is why setting the max-width property of your image in pixels works:
这就是为什么以像素为单位设置图像的 max-width 属性有效的原因：
<style>
div { display: table-cell; padding: 15px; width: 200px; }
div img { max-width: 200px; display:block;}
</style>
table-layout: fixed, as suggested by Alex, may work if the image is not in the first row of the table, because the first row's content dictates columns widths.
table-layout: fixed，正如 Alex 所建议的那样，如果图像不在表格的第一行中，则可能会起作用，因为第一行的内容决定了列宽。
回答by kufeiko
For a specific case, there's another workaround that I accidently found online: if you use display: table;+ display: table-cell;to mimic a two (or more) column layout in a responsive site, try this instead: give the sidebar a widht of, say, 350px and the main content part of the site a width like width: calc(100% - 360px);. That did the trick for me, and the bonus was I needed a fixed width sidebar. I giess that will work with em's too.
对于特定情况，我在网上偶然发现了另一种解决方法：如果您使用display: table;+display: table-cell;来模拟响应式站点中的两列（或更多）列布局，请尝试以下方法：给侧边栏提供 350 像素的宽度和主网站的内容部分宽度为width: calc(100% - 360px);. 这对我来说很有用，好处是我需要一个固定宽度的侧边栏。我猜这也能和他们一起工作。
Of course, this is js-dependent, but nowadays should be more than OK.
当然，这是依赖于 js 的，但现在应该已经绰绰有余了。
回答by Zachary Forrest
add float: leftto the div css
添加float: left到div css
回答by Brook Julias
Have you tried adding a position property to your image? img {position:relative;}? It should conform to the parent element.
您是否尝试过向图像添加位置属性？img {position:relative;}? 它应该符合父元素。
回答by Zeriz
I had the same problem. I solved it by doing this:
我有同样的问题。我通过这样做解决了它：
Tested in Opera and Fi
在 Opera 和 Fi 中测试
.classname {
max-width: 100%;
width: 100%;
display: table-cell !important;}
