max-width:100%在td或者table-cell里渲染不符合预期小笔记
max-width:100%在td或者table-cell里渲染不符合预期小笔记
练小习
发布于 2018-01-15 15:35:40
发布于 2018-01-15 15:35:40
文章被收录于专栏：练小习的专栏
一直没太注意有这个坑，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，列宽由表格宽度和列宽度设定就好了。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
