摘要: 声明:此文章为转载(点击查看原文),如有侵权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;不支持的解决方案。的更多相关文章

  1. 关于ie7下display:inline-block;不支持的解决方案

    关于ie7下display:inline-block:不支持的解决方案 今天码的时候遇到这个问题了. 如果本身是内联元素的,把它的display属性设置设置为inline-block时,所有浏览器都是 ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. 解决 IE7 中 display:inline-block 失效的问题

    我们在做首页菜单选项的时候,通常会用 li 标签去做,通过对 li 标签设置样式: display:inline-block 可以让 li 标签横排显示.但是这样做,在 IE7 浏览器下面会有一个兼容 ...

  4. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  5. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  6. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  7. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. 设计模式---组件协作模式之策略模式(Strategy)

    一:概念 Strategy模式,对一系列的算法加以封装,为所有算法定义一个抽象的算法接口,并通过继承该抽象算法接口对所有的算法加以封装和实现,具体的算法选择交由客户端决定(策略). Strategy模 ...

  2. python---正则中的(?P<name>group)

    application=tornado.web.Application([ (r"/index/(?P<num>\d*)/(?P<nid>\d*)",hom ...

  3. 什么是cap

    cap理论是分布式系统中非常重要的一个理念 什么是cap理论: Consistency一致性 Availability可用性 Partition-tolerance分区容忍性 CP: 高一致性C和分区 ...

  4. python 小爬虫爬取博客文章初体验

    最近学习 python 走火入魔,趁着热情继续初级体验一下下爬虫,以前用 java也写过,这里还是最初级的爬取html,都没有用html解析器,正则等...而且一直在循环效率肯定### 很低下 imp ...

  5. 机器学习:python使用BP神经网络示例

    1.简介(只是简单介绍下理论内容帮助理解下面的代码,如果自己写代码实现此理论不够) 1) BP神经网络是一种多层网络算法,其核心是反向传播误差,即: 使用梯度下降法(或其他算法),通过反向传播来不断调 ...

  6. keepalive+nginx 热备跟负载均衡

    结构图 keepalived配置 master跟backup除了state跟优先级,其它一样,优先级master需大于backup ! Configuration File for keepalive ...

  7. jdk 环境

    一.下载 jdk 下载版本为:Linux x64 最新版本 curl -L -O http://download.oracle.com/otn-pub/java/jdk/8u45-b14/jdk-8u ...

  8. luogu P1053 篝火晚会

    传送门 首先如果题目的目标状态不是一个环就不合法 然后先把这个环搞出来,然后每个位置上的数对这个数对应的位置连边,可以发现有若干个环,而只要对这些环执行操作就好了,答案上界显然是\(n\).然后,如果 ...

  9. CF1009E [Intercity Travelling]

    这道题先考虑一种暴力n方做法 设\(f_i\)表示到\(i\)点所有情况的困难度之和(\(f_0=0\)),\(pre_i=\sum_{j=1}^{i} a_j\) 考虑从点\(j\)中途不经过休息站 ...

  10. 使用Jupyter lab前应该读的几篇文章

    知乎上的一篇文章: 如何优雅的使用Jupyter? Jupyter Lab原来还有如下使用方式: 执行Shell命令 Hintland(提示命令).snippets(插入代码段).一键美化代码等功能( ...