本来今天想出JavaScript继承的博文的，由于也才刚学习不久，以及工作比较忙，所以暂推两天写JavaScript的继承，喜欢的童鞋们关注我的博客哟！

　　okay，言归正传。之前在接触前端的时候，处理各种浏览器的兼容问题，现在也有了一定的积累，对IE系列的CSSbug也写了一篇博文，喜欢的童鞋可以点击此处查看。

　　inline-block是CSS2.1属性，而大家经常会这么处理ie6、7下的inline-block

.selector {

    display: inline-block;

    *display: inline;

    *zoom:;

}

　　 这样来说处理ie6、7的兼容就不会有问题，久而久之大家也就习惯了，觉得是ie6、7不支持inline-block属性而需要写个hack来改变他的显示方式，然而真的是这样吗？其实早在ie5.5就已经开始支持inline-block了，只是支持的并不是那么完善。可参考MSDN:http://msdn.microsoft.com/zh-cn/library/ie/ms530751(v=vs.85).aspx。接下来，作者将带大家来证明一下ie5.5以上的浏览器是否真的支持inline-block。

　　首先大家看下面这个例子：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <style type="text/css">

        html, body, div, span {margin:; padding:}

        .wrapper span {

            display: inline-block;

            width: 100px;

            height: 100px;

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

    </div>

</body>

</html>

　　可以看到，我为行元素<span>设置了display: inline-block;属性，结果如何呢？（由于作者的IETester出了点问题，IE5.5和IE7不能打开，因此我使用IETester打开IE6，用IE10的浏览器模式切换至IE7）

　　

　　可以看到，身为行元素的<span>在IE6及IE7下神奇的可以设置宽高了，并且是在同一行（废话）。看来行元素在ie6、7是可以设置inline-block的，那么块元素呢？

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <style type="text/css">

        html, body, div, span {margin:; padding:}

        .wrapper div {

            display: inline-block;

            width: 100px;

            height: 100px;

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>

</html>

　　可以看到块元素在IE6、7下是无法设置inline-block的，因此可以得出结论，IE6、IE7实际上是支持inline-block的，只是支持不那么全面。至于列表元素大家可以下去尝试一下<li>。因为我们才使用如下代码对块元素在IE6、7下使用inline-block做兼容处理。

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <style type="text/css">

        html, body, div, span {margin:; padding:}

        .wrapper div {

            display: inline-block;

            *display: inline;

            *zoom:;

            width: 100px;

            height: 100px;

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>

</html>

　　而此代码对行元素同样实用，因此不管三七二十一，上来直接display: inline-block; *display: inline; *zoom: 1; 肯定不会有问题。这也导致了大家认为IE6、7是不支持inilne-block的一个误解。而实际上对于行元素，可以直接设置display: inline-block;不用再设置*zoom: 1;

　　

　　其实细心的童鞋会发现设置inline-block后，其它浏览器会有几像素的缝隙，而在ie6、7下却没有，这是因为其它浏览器将回车或空格当成了一个空格，而形成了元素之前有空隙，可以将元素写在同一行就可解决此问题，有童鞋会说使用float: left;既然使用inline-block就已经解决了块元素在同一行，或行元素无法设置宽高的问题了就不要在使用float: left了，我记得w3c标准上也有说 display: inline-block不要和float: left同时使用。

ie6、ie7真的不支持inline-block吗？的更多相关文章

  1. 如何让低版本的IE浏览器（IE6/IE7/IE8）支持HTML5 header等新标签

    html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览 ...

  2. IE（IE6/IE7/IE8）支持HTML5标签

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  3. IE（IE6/IE7/IE8）支持HTML5标签--20150216

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  4. 解决IE6/IE7/IE8不支持before,after问题

    对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...

  5. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  6. IE6/IE7浏览器不支持display: inline-block;的解决方法

    display: inline-block;在IE6与IE7中存在bug. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的disp ...

  7. （转）让IE6/IE7/IE8浏览器支持CSS3属性

    原文链接 http://blog.csdn.net/h5_queenstyle12/article/details/50437442 一.下载 搜索下载:ie-css3.htc,它是让IE浏览器支持C ...

  8. 让IE6/IE7/IE8支持HTML5标签的js代码

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  9. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

随机推荐

  1. WPF学习（3）布局

    今天我们来说说WPF的布局.我们知道WinForm的布局主要是采用基于坐标的方式,当窗口内容发生变化时,里面的控件不会随之动态调整,这就造成了一个很不好的用户体验.而WPF为了避免这个缺点,采用了基于 ...

  2. vs2015web工程中的html引用压缩后css后无法智能提示的问题解决

    环境:win10x64 vs2015企业版 项目:空白web项目(.net framework4) 问题:html页面加入压缩后的css(eg:bootstrap.min.css),编码的时候无法智能 ...

  3. Android.9图片评论(一个)

    什么是.9图片 至于什么是.9图片这里就简单提一下,即图片后缀名前有.9的图片,如pic.9.png.pic1.9.jgp,诸如此类的图片就称为.9图片. .9图片的作用 ①.9图片的作用是在图片拉伸 ...

  4. 在CMD命令行和PowerShell中实现复制粘贴功能

    在CMD命令行和PowerShell中实现复制粘贴功能         常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...

  5. Eclipse正在使用Ant扑灭Android数据包错误的解决方案 – Perhaps JAVA_HOME does not point to the JDK

    问题描写叙述: 在Eclipse中执行ant批量打包工具出错,日志信息例如以下: D:\Android\android-sdk-windows\tools\ant\build.xml:601: The ...

  6. 【SSH 基金会】SSH框架--struts进一步的详细解释（两）

    继上篇博客 既然我们知道了不使用struts给我们带来这么多弊端,那么以下我们来看看struts是怎样封装的.怎么解决我们出现的问题的? 先来说一下struts的基本流程,帮助大家理解以下的代码: S ...

  7. Git合并多个Commit

    当前有四个commit,现在要将四个commit合并为一个,可以使用git rebase -i HEAD~{这里是要合并的commit数量} 如 git rebase -i HEAD~4 ,即为合并最 ...

  8. HDU 3729 I&#39;m Telling the Truth(二部图最大匹配+结果输出）

    职务地址:HDU 3729 二分图最大匹配+按字典序输出结果. 仅仅要从数字大的開始匹配就能够保证字典序最大了.群里有人问. . 就顺手写了这题. . 代码例如以下: #include <ios ...

  9. asp.net学习之扩展GridView

    原文:asp.net学习之扩展GridView 本节讨论如何从现有的控件,进而扩展成强大的,更定制的GridView控件 1.扩展BoundField 默认的BoundField不能显示多文本,文字一 ...

  10. 十天学Linux内核之第六天---调度和内核同步

    原文:十天学Linux内核之第六天---调度和内核同步 心情大好,昨晚我们实验室老大和我们聊了好久,作为已经在实验室待了快两年的大三工科男来说,老师让我们不要成为那种技术狗,代码工,说多了都是泪啊,, ...