Html 为什么Firefox和Opera忽略了display:table单元格内的最大宽度？_Html_Css_Css Tables

Html 为什么Firefox和Opera忽略了display:table单元格内的最大宽度？

html css

Html 为什么Firefox和Opera忽略了display:table单元格内的最大宽度？,html,css,css-tables,Html,Css,Css Tables,以下代码在Chrome或IE中正确显示（图像宽200px）。在Firefox和Opera中，max width样式被完全忽略。为什么会发生这种情况，有没有好的解决办法？另外，哪种方式最符合标准注对于这种特殊情况，一种可能的解决方法是将max width设置为200px。然而，这是一个相当做作的例子。我正在寻找一种可变宽度容器的策略 <!doctype html> <html> <head> <style> div { d

以下代码在Chrome或IE中正确显示（图像宽200px）。在Firefox和Opera中，

max width

样式被完全忽略。为什么会发生这种情况，有没有好的解决办法？另外，哪种方式最符合标准

注对于这种特殊情况，一种可能的解决方法是将

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>

“最大宽度”状态不适用于内联元素，因此在不同浏览器中会出现不一致的行为。我不确定您的预期结果，但是如果您设置

div img{display:block}

，然后将

img

和

标记与浮点对齐，而不是标准内联，您就可以实现它。

将

float:left

添加到div css

您尝试过在图像中添加位置属性吗<代码>img{位置：相对；}？它应该符合父元素。

您需要做的是将包装器div（带有

display:table cell

）放在另一个具有

display:table

和

table layout:fixed

的div中。这使得Firefox和Opera都遵守

max width

规则

请参阅。

我通过使用

宽度：100%

而不是

最大宽度：100%

，设置宽度：100%确实解决了问题，但它引入了另一个问题。在WordPress中，您不希望为图像设置宽度：100%。如果图像是中等大小，宽度为300px，那么会怎样？我一直在使用类将中等大小的宽度设置为50%，但如果图像较小，该怎么办？然后它会被拉伸。在webkit浏览器中，它使用宽度：auto；最大宽度：100%；但由于Firefox、Opera和IE忽略了这一点。。。这是一个巨大的问题。

这已经成为一个非常令人困惑的话题

“最大宽度”不适用于内联元素，也不适用于表单元格元素。如果图像的显示设置为“块”，它确实可以在图像上工作，但什么是100%？在表格布局中，单元格的内容会推动列宽以尽可能容纳所有内容。因此，最大宽度：100%，在大多数情况下，表格单元格内的宽度是内容的自然宽度

这就是以像素为单位设置图像的“最大宽度”属性的原因：

<style>
    div { display: table-cell; padding: 15px; width: 200px; }
    div img { max-width: 200px; display:block;}
</style>


div{显示：表格单元格；填充：15px；宽度：200px；}
div img{最大宽度：200px；显示：块；}

表格布局：按照Alex的建议，如果图像不在表格的第一行，则修复了该问题，因为第一行的内容决定了列宽。
我也遇到了同样的问题。我通过这样做解决了这个问题：
在歌剧和戏剧中接受测试
.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}

对于一个特定的案例，我在网上偶然发现了另一个解决方法：如果使用display:table+显示：表格单元格
要模拟响应站点中的两列（或更多列）布局，请尝试以下方法：为边栏设置一个宽度，例如350px，为站点的主要内容部分设置一个宽度，如宽度：calc（100%-360px）。这对我来说是个好办法，而且好处是我需要一个固定宽度的边栏。我想这对他们也有用
当然，这取决于js，但现在应该更合适了。
不太确定您想要实现什么？你想让你的图像缩放吗？+1不，他的例子很好。图像已经。。。大约400像素。如果您告诉它获取宽度：100px它会收缩。但它不尊重最大宽度。好吧，我明白了。你不想设置你的div max width吗？@edl不，div可能是可变宽度的。很好的发现！该规范似乎不适用于内联元素。不幸的是，它似乎不能解决这个问题。显示器必须是表格单元格吗？删除它会得到更一致的结果。嗯，我没有编写使用表单元格的代码，老实说，我不太理解它。是的，它必须是表格单元格。您是否能够重写页面，使所有带有的div显示：表格单元格实际上是表格单元格。如果要将div显示为表格单元格
，我看不到使用div的好处。这是规范的确切部分：我尝试了表格布局：固定在FF（19）和IE（9）上，即使没有最大宽度也可以工作。对于我来说，表格布局：固定规则固定了图像问题，但使整个表格更窄，即使我在元素上使用display:tableMDN作为表格布局的参考，宽度也为100%。谢谢亚历克斯！在我的例子中，我无法为父容器设置像素宽度，添加display:table和table layout:fixed对我来说真是妙不可言！我在股票Android浏览器中遇到了一个可能相关的问题（试图在显示为table cell的元素内的图像上使用最大宽度百分比），而表格布局：fixed
为我解决了这个问题。这是一个非常糟糕的答案。处理图像时，width
和max width
之间的差异非常重要width
强制将图像设置为该宽度，无论该宽度是否会远大于其分辨率（在大多数情况下看起来很糟糕）。但是max width
定义图像不能大于指定的宽度，这意味着如果图片大于容器，它将缩放到100%@idmean，虽然我同意你的观点，但我不认为这一定是“非常糟糕的答案”因为在某些情况下，最好强制使用宽度
，然后让图像溢出单元格。或者，也可以根据情况将宽度
与最大宽度结合使用。
.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}