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

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

  如在下面的 html 结构中:

 <ul class="nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

在 非 IE7 浏览器中,排版下:

 

IE7 浏览器中排版如下:

  

怎么解决这个问题呢?主要有以下两种方案:

针对通过 li { display:inline-block} 来做横排菜单的需求,有以下两个解决方案:

  解决方案 一: 对 li 设置样式(或者向右 浮动)

li {
    display:block;
    float:left;
    margin-left:20px;
}

解决方案 二:专门为 IE7 写 hack。

  

    li {
    	position:relative;
        width: 100px;
        height: 40px;
        background: #eee;
        margin: 10px;
       /*关键代码*/
        display: inline-block;
         /*兼容处理 ie7 下 display:inline-block 不起效的问题*/
        *display: inline;
        *zoom: 1;
    }

  

  解决方案参考链接:

     1. css hack解决 IE7 下 display:inline-block 不起效的问题: http://blog.csdn.net/linlin_juejue/article/details/6622756

     2.  IE 中的 zoom 属性的作用:http://www.jb51.net/css/40285.html

时间: 2024-11-09 05:08:48

解决 IE7 中 display:inline-block 失效的问题的相关文章

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

IE6/IE7中display:inline-block解决办法

IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: 对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行,允许空格.(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性) IE中对内联元素使用displ

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

table 中 display为 block 时 tbody 失去宽度

一,要使 tbody 宽度正常,必须设置 display:table.或者更通用的变通是用 JavaScript 控制表格的显示隐藏时不直接调协此 table 的 display 属性,而是给 table 包裹一层 div,然后设置该 div 的display 属性为 block 或 none. 二,更简单的处理,不用给 table 外包括 div 了,只要在恢复显示时设置 display 属性为空字符串即可. 原文地址:https://www.cnblogs.com/oralig/p/1011

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

css ie7中overflow:hidden失效问题及解决方法

css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决方法: 我们在IE7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug

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

之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display:block的区别 首先先说一个名词 :inline element:行内元素也叫作内联元素,内嵌元素,直进式元素 block element:块级元素 1.display:inline 转化成内联元素,不换行: 内联元素的前面和后面都不会有换行符,你不可以给内联元素定宽和高,也就是说你如果同时给一

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

block元素的特点是: 元素另起一行: 行宽高边距可控制: <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. <span>, <a>, <label>, <input>, <img>, <strong&

css中display常用属性详解之Block(一)

用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 block 解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样) 特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器  2.可以应用margin/padding  3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素  4.处