Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 解决ie7下display: inline-block失效的BUG

解决ie7下display: inline-block失效的BUG

发布时间:2020-05-10   编辑:www.jquerycn.cn
jquery中文网为您提供解决ie7下display: inline-block失效的BUG等资源,欢迎您收藏本站,我们将为您提供最新的解决ie7下display: inline-block失效的BUG资源
display: inline-block在ie7下不显示,但在ff中是正常的,下面我来给大家整理了一些解决ie7 下display: inline-block不兼容问题的办法。

 

方法一

.ie7 {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

后来又看到一方法

#id{display:inline-block;}

#id{display:inline;}

注意:一定要分开写,如果写在同一个选择器里是不起作用的,这是IE的一个bug。

在IE下,display:inline-block只是触发了元素的layout。比如将display:inline-block给到div上,只能保证这个div拥有块元素的特征(可以设置宽度和高度),但是还是行布局(产生换行)。接下来要设置display:inline.更改这个div的布局为内联布局(不产生换行)。

附后一方法

IE6下块元素如何实现display:inline-block的效果?

有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):

div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:

div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/


例子

<!DOCTYPE html>
<html lang="gb2312">
<head>
<meta charset="gb2312" />
<title>example</title>
<style>
    #example li {display:inline-block;}/* 在这里设置的inline-block属性在ie6 7下无效,仅仅是触发了ie的layout*/
    #example li {*display:inline;}/* 解决办法:针对ie6 7添加inline属性,使之呈现为内联元素 */
</style>
</head>
 
<body>
    <div id="example">
            <ul>
                <li>1</li>
                <li>1</li>
            </ul>
      </div>
</body>
</html>


下面给出具体例子:
css代码

?

.head{
width:106px;
padding:20px;
margin:0 auto;
border:1px solid #000;
}
 
.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:inline-block;
text-indent:-999em;
overflow:hidden;
direction:ltr;
}
html结构


<div class="head"><a class="logo" href="#">logo</a></div>
firefox下截图                               ie6下截图,图片消失不见了

\'解决ie7下display: \'解决ie7下display:

修改过的css代码

 代码如下 复制代码

.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:block;/*float:left;*/
text-indent:-999em;
overflow:hidden;
direction:ltr;
}

firefox下截图                               ie6下截图

\'解决ie7下display:          \'解决ie7下display:

您可能感兴趣的文章:
细说浏览器特性检测(1)-jQuery1.4添加部分
JS display属性实例解析
jQuery ajax BUG:object doesn''t support this property or method
JQuery实现简单验证码提示解决方案
jQuery ajax BUG:object doesn't support this property or method
Jquery乱码的一次解决过程 图解教程
jQuery获取css z-index在各种浏览器中的返回值
jquery 问答知识整理
jQuery 开天辟地入门篇一
jQuery1.5.1 animate方法源码阅读

[关闭]