max-width:100%在td 或 table-cell 的兼容解决办法

最新推荐文章于 2021-06-18 02:22:51 发布

cc蒲公英

最新推荐文章于 2021-06-18 02:22:51 发布

阅读量7k

点赞数 1

分类专栏：浏览器兼容文章标签： max-width table-cell

浏览器兼容专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一直没太注意有这个坑，td或者table-cell的元素里，如果没有指定容器宽度，那么容器里的img标签max-width:100% 在IE7-11，以及firefox下会不理会max-width的限制，例如：

<!DOCTYPE html> <html> <head> <title>max-width:100%不兼容小笔记-练小习</title> <style> *{ margin: 0; padding: 0; border:0; } .img-wrap{ display: table; margin: 20px auto; width: 50%; } .img{ display: table-cell; border: 1px solid #cedfea; padding: 10px; } .img img{ max-width: 100%; } </style> </head> <body> <div class="img-wrap"> <div class="img"> <img class="smallcursor" src="https://mccdn.qcloud.com/static/img/f669eac6b6cd3d333cdf20256aa51eae/image.jpg"> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

这个demo在IE7-11以及firefox下，img并没有被max控制。

解决的方式，给table设置table-layout: fixed，现在再看这个demo：

<!DOCTYPE html> <html> <head> <title>max-width:100%不兼容小笔记-练小习</title> <style> *{ margin: 0; padding: 0; border:0; } .img-wrap{ display: table; table-layout: fixed; margin: 20px auto; width: 50%; } .img{ display: table-cell; border: 1px solid #cedfea; padding: 10px; } .img img{ max-width: 100%; } </style> </head> <body> <div class="img-wrap"> <div class="img"> <img class="smallcursor" src="https://mccdn.qcloud.com/static/img/f669eac6b6cd3d333cdf20256aa51eae/image.jpg"> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

因为table-cell默认的automatic是内容决定宽度，IE和FF遵守了这一渲染方式，我们把他改成fixed，列宽由表格宽度和列宽度设定就好了。

cc蒲公英

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
max-width:100%在td 或 table-cell 的兼容解决办法

一直没太注意有这个坑，td或者table-cell的元素里，如果没有指定容器宽度，那么容器里的img标签max-width:100% 在IE7-11，以及firefox下会不理会max-width的限制，例如： max-width:100%不兼容小笔记-练小习 *{ margin: 0; padding: 0; border:0; } .img-wr
复制链接

扫一扫