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

cc蒲公英

7123人浏览 · 2016-08-24 17:55:27

cc蒲公英 · 2016-08-24 17:55:27 发布

一直没太注意有这个坑，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，列宽由表格宽度和列宽度设定就好了。

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

所有评论(0)

查看更多评论

cc蒲公英

@cddcj

已为社区贡献2条内容