display:inlin-block在ie6/ie7中无效该怎么办

2016-9-30 16:52 来自本站原创 33,309 4 6
[摘要]

在web前端开发中,display:inlin-block真是个非常实用的属性,但是块状元素在IE6/IE7下此属性会失效,想要知道怎么解决么?一起来看一下。

不得不说display:inlin-block真是个非常实用的属性,它能使行内元素和块状元素变成“行内块状”元素,简单的说就是被设置display:inlin-block后,元素会像行内元素一样从左到右排列,而同时又具有块状元素那样可以设置宽高。在很多时候网页布局就简单很多了,但是在ie6/ie7中,块状元素添加此属性却无法正常显示,该怎么办呢?

display:inlin-block在ie6/ie7中无效该怎么办

在低版本IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。

接下来要设置display: inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline-block属性是不会触发元素的layout的,因此我们还要额外加上 *zoom:1来触发layout!

兼容IE6/IE7的display:inline-block写法

直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。
兼容各浏览器的代码如下:

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

这样处理后,就解决了display:inlin-block在ie6/ie7中无效的问题,也算是前端开发的一个小技巧,笔者在项目中遇到此问题,做笔记记录,同时也希望能够帮到有需要的人。

本文最后更新于2016年12月2日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:4   其中:访客  0   博主  0
    加载中...
    1. 7年前 (2016-10-01) 0楼

      写的不错

    2. Koo 2
      7年前 (2016-10-01) 0楼

      请升级你的浏览器。

    3. 7年前 (2016-09-30) 0楼

      没想到博主竟然还关注IE6和7,我已经放弃IE,所以在站点顶端都会提醒使用IE的用户更换浏览器

      • Wing
        7年前 (2016-10-01)  地下1层

        @boke112导航: 在实际项目中,要考虑到用户的情况,商业网站必须要覆盖绝大多数用户的,不能像折腾自己博客一样随心所欲

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 4 6 33,309
    Top