为什么Firefox和Opera会忽略display：table-cell内部的最大宽度？
以下代码在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>
[更新]
如下面的mVChr所述，w3.org规范声明max-width不适用于inline元素。我尝试使用div img { max-width: 100%; display: block;}，但似乎无法解决问题。
[更新]
对于这个问题，我仍然没有解决方案。但是，我正在使用以下JavaScripthack来解决我的问题。从本质上讲，它重新创建浏览器是否支持上述情况，并检查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();
});
问题答案：
该w3.org规范指出，最大宽度并不适用于内联元素，所以你会得到跨浏览器的行为不一致。我不确定您的预期结果，但是如果您设置divimg { display:block }和然后将img和p标记与浮点数而不是标准内联对齐，就可以实现。
-
我在Firefox 34及以上版本中发现了一个与显示行为有关的错误： flex。 我可以确认代码在所有现代浏览器中都一直有效，现在仍然有效，但是Firefox34和最近的Firefox35测试版的行为完全不一致。 我制作了一把小提琴，展示了不同的行为：http://jsfiddle.net/ntkawu63/ 在Firefox34中启动它，它将忽略图像上的最大宽度：100%。在任何其他浏览器中，包
-
问题内容： 我正在尝试在包级别使用Hibernate @TypeDef批注，这与Hibernate文档中所描述的完全相同。我正在使用和。代码可以编译，并且在类路径中，但是Hibernate仍然看不到它。 如果我上课，那是行得通的，但是如果我把放在那，那是没有用的。我试图用Google搜索，但找不到任何有用的信息。 谢谢！ 问题答案： 您可能需要添加一个 到您的Hibernate配置文件，或调用co
-
问题内容： 我有一个带有关系的实体，我想通过一个查询来检索它，因此使用。有时，Hibernate不尊重它，而是发出N + 1 秒。随着 有时 我的意思是，因为我不知道是什么触发它，我有案件对不同的查询，这可能发生，或者不一样的类。 这是带有我使用的注释的简化实体： 用 我希望单个查询能够同时获取其及其内容，例如 相反，我得到了第一选择所有N S和那么N 献给所有S（考虑没有缓存）。 我发现了许多类
-
我对iOS布局约束的机制有误解。请参阅下面列出的我放在viewDidLoad中的代码。 在我看来，我的意图是明确的。我想在设备屏幕的中央看到一个按钮。但我只能看到下面的图片。 我在项目控制台中有一个输出，非常可怕，我无法从中理解任何东西。 无法同时满足约束。可能以下列表中至少有一个约束是您不想要的。尝试以下方法：（1）查看每个约束，并尝试找出您不期望的约束；（2） 查找添加了一个或多个不需要的约束
-
问题内容： 我将Spring 3.1.3用于Web应用程序，将XML配置与组件扫描结合使用。 我意识到，其中一个扫描组件必须在其他几个组件之前进行初始化。在所有需要构造后初始化的类上，我在方法上具有@PostConstruct批注。 为了设置依赖关系顺序，我在需要先后构造的类上将“ @Component”更改为“ @Component（“ configData”）”。然后，在每个需要在“ conf
-
问题内容： 我的意图是获得客户的分页结果集。我正在使用Tom的这种算法： 我还在“客户”列中定义了一个索引。“ FIRST_NAME”： 该查询返回了预期的结果集，但是从说明计划中，我注意到未使用该索引： 我正在使用Oracle 11g。由于我只查询前20行（按索引列排序），因此我希望使用索引。 为什么Oracle优化器会忽略索引？我认为分页算法有问题，但是我不知道是什么。 谢谢。 问题答案： 您