max-width:100%在td或者table-cell里渲染不符合预期小笔记
时间:2022-04-21
本文章向大家介绍max-width:100%在td或者table-cell里渲染不符合预期小笔记,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一直没太注意有这个坑,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,列宽由表格宽度和列宽度设定就好了。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java实现多个网络文件批量下载并压缩
- Python学习笔记(四) 爬取网站数据(静态,动态)
- java整合FastDFS文件服务器
- Flutter基础widgets教程-CupertinoSwitch篇
- XmlRootElement的作用和用法
- 获取指定月份的所有工作日(工作日为自定义的)
- 自定义配置类,读取Application.properties中的参数
- 将InputSteram转换成文件输出并下载至本地
- sql serve2008是否自带互斥锁
- Flutter基础widgets教程-CupertinoSwitch篇
- Flutter基础widgets教程-CupertinoTabScaffold篇
- C++11 move 语义
- 论函数的设计应如何才好,返回临时变量 | 返回引用 | 传递引用
- Flutter基础widgets教程-CupertinoTabView篇
- 关于time的使用