bra*_*rad 67 html css css-tables
以下代码在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; },但似乎没有解决问题.
我仍然没有解决这个问题的方法.但是,我使用以下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();
});
小智 120
你需要做的是把你的包装div(与display: table-cell那个)放在另一个包含display: table 和的 div中table-layout: fixed.这使Firefox和Opera都遵守max-width规则.