关于ie7下display:inline-block;不支持的解决方案。
摘要: 声明:此文章为转载(点击查看原文),如有侵权24小时内删除。联系QQ:1522025433.
今天码的时候遇到这个问题了。
如果本身是内联元素的,把它的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:; *display: inline; } /*推荐*/div { display:inline-block; _zoom:; _display:inline; }
2、(copy过来)
先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
附件一个学习中的案例:
学习中遇到的案例:
html
css
以上代码在谷歌、火狐、等浏览器多可以居中显示不定宽的ul标签,
但是在ie7及以下display:inline-block,不起作用。
效果图:
在ie7及以下浏览器下就会显示异常:
可见没有居中。
把css中注释掉的代码加上:
现在ie7及以下浏览器下就正常了如下图:
感谢网友的帮助。
关于ie7下display:inline-block;不支持的解决方案。的更多相关文章
- 关于ie7下display:inline-block;不支持的解决方案
关于ie7下display:inline-block:不支持的解决方案 今天码的时候遇到这个问题了. 如果本身是内联元素的,把它的display属性设置设置为inline-block时,所有浏览器都是 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- 解决 IE7 中 display:inline-block 失效的问题
我们在做首页菜单选项的时候,通常会用 li 标签去做,通过对 li 标签设置样式: display:inline-block 可以让 li 标签横排显示.但是这样做,在 IE7 浏览器下面会有一个兼容 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
随机推荐
- 设计模式---组件协作模式之策略模式(Strategy)
一:概念 Strategy模式,对一系列的算法加以封装,为所有算法定义一个抽象的算法接口,并通过继承该抽象算法接口对所有的算法加以封装和实现,具体的算法选择交由客户端决定(策略). Strategy模 ...
- python---正则中的(?P<name>group)
application=tornado.web.Application([ (r"/index/(?P<num>\d*)/(?P<nid>\d*)",hom ...
- 什么是cap
cap理论是分布式系统中非常重要的一个理念 什么是cap理论: Consistency一致性 Availability可用性 Partition-tolerance分区容忍性 CP: 高一致性C和分区 ...
- python 小爬虫爬取博客文章初体验
最近学习 python 走火入魔,趁着热情继续初级体验一下下爬虫,以前用 java也写过,这里还是最初级的爬取html,都没有用html解析器,正则等...而且一直在循环效率肯定### 很低下 imp ...
- 机器学习:python使用BP神经网络示例
1.简介(只是简单介绍下理论内容帮助理解下面的代码,如果自己写代码实现此理论不够) 1) BP神经网络是一种多层网络算法,其核心是反向传播误差,即: 使用梯度下降法(或其他算法),通过反向传播来不断调 ...
- keepalive+nginx 热备跟负载均衡
结构图 keepalived配置 master跟backup除了state跟优先级,其它一样,优先级master需大于backup ! Configuration File for keepalive ...
- jdk 环境
一.下载 jdk 下载版本为:Linux x64 最新版本 curl -L -O http://download.oracle.com/otn-pub/java/jdk/8u45-b14/jdk-8u ...
- luogu P1053 篝火晚会
传送门 首先如果题目的目标状态不是一个环就不合法 然后先把这个环搞出来,然后每个位置上的数对这个数对应的位置连边,可以发现有若干个环,而只要对这些环执行操作就好了,答案上界显然是\(n\).然后,如果 ...
- CF1009E [Intercity Travelling]
这道题先考虑一种暴力n方做法 设\(f_i\)表示到\(i\)点所有情况的困难度之和(\(f_0=0\)),\(pre_i=\sum_{j=1}^{i} a_j\) 考虑从点\(j\)中途不经过休息站 ...
- 使用Jupyter lab前应该读的几篇文章
知乎上的一篇文章: 如何优雅的使用Jupyter? Jupyter Lab原来还有如下使用方式: 执行Shell命令 Hintland(提示命令).snippets(插入代码段).一键美化代码等功能( ...