关于ie7下display:inline-block;不支持的解决方案
如果本身是内联元素的,把它的display属性设置设置为inline-block时,所有浏览器都是支持的。
相反,如果本身是块级元素的,把它设为display:inline-block; 那么ie6/ie7都是不支持的。
IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。
这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
解决方案:
1、我的方案
直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:
/*推荐:IE6、7*/ div {
display:inline-block;
*zoom:1;
*display: inline;
}
2、解决方案
先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
3、块元素
<li>、<div>等块元素直接用 display:inline 行内展示。
转载于:https://www.cnblogs.com/xinaixia/p/5909847.html
关于ie7下display:inline-block;不支持的解决方案相关推荐
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline inline-block block
块级元素:默认设置display:block的元素<div>.<h1>~<h6>.<p>.<ul>.<ol>.<li> ...
- CSS中display:block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...
- 关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
最新文章
- NSPredicate 查询/搜索
- php动态网页设计(第2版),PHP动态网页设计(第2版)——使用PHP
- HashTable 源码解析 jdk1.8
- 2018程序员必读书单
- [励志英语片段]practicing deliberately
- java lazy实现依赖调用_spring 之 lazy-init Autowired depends-on
- 区块链指南 第2章 区块链基础
- 有python专业的世界大学_大数据时代专业怎么选?2018年QS世界大学商业分析硕士专业排名...
- aws上传找不到endpoint url或者The Aws Access Key Id you provided does not exist in our recordss
- 团队内的沟通方式:网络 OR 当面
- 【PMP】燃起图燃尽图分析
- Zero-shot knowledge distillation in deep networks
- 唐朝为什么出现多次官修家谱的现象?唐朝家谱的形式有什么变化?
- Appium常用操作及H5页面元素定位
- php中redis的exec()用法,Redis Exec 命令 - Redis 教程 - 自强学堂
- thinkserver ts530装centos7
- 期货开户水滴石穿知行合一
- 【笔记】python的while循环简介:使用while循环、让用户选择何时退出、使用标志、使用break退出循环、在循环中使用continue、避免无限循环
- GPT-4炸圈--多模态大模型
- 初探RabbitMQ