美文网首页
IE8以下 inline-block的兼容性问题

IE8以下 inline-block的兼容性问题

作者: 前端葱叶 | 来源:发表于2019-02-14 14:24 被阅读0次
问题描述:

IE8浏览器以下样式显示出错,所有的li无法一行显示,如图:

正常显示.png IE8以下出错,无法一行显示.png
原因:

li设置了display:inline-block,而inline-block在IE8和IE8以下兼容性不佳,不能识别inline-block,仅支持宽高,而不在一行显示。

解决方案:

1、在display:inline-block之后,直接将块元素设置为display:inline呈现为内联对象,然后触发layout(如zoom:1)。

兼容所有浏览器的方法参考:(重点添加display:inline;zoom:1;)
li{
display:inline-block;
*display:inline;
*zoom:1;
}

相关文章

  • IE8以下 inline-block的兼容性问题

    问题描述: IE8浏览器以下样式显示出错,所有的li无法一行显示,如图: 原因: li设置了display:inl...

  • inline-block、空白、导航条

    第一部分 inline-block一、inline-block之间的缝隙(inline-block再ie8以下版本...

  • 去除inline-block元素的内缝隙/BFC

    去除inline-block元素的内缝隙的几种方法 IE8以下不支持inline-block 去除inline-b...

  • ie8兼容问题

    最近公司要新开一个项目了,要兼容ie8的浏览器,兼容性问题真的是一个大大的问题,不断的总结一些ie8在兼容性上样式...

  • vue.js的安装

    vue的兼容性: 不支持IE8以下的浏览器, IE8 无法模拟的 ECMAScript 5 特性 但它支持所有兼容...

  • 关于IE8 及以下的兼容性问题

    本文分享下我在项目中积累的IE8+兼容性问题的解决方法。根据我的实践经验,如果你在写HTML/CSS时候是按照W3...

  • 10css兼容性问题

    margin兼容性问题 display:inline-block IE6 最小高度问题 IE6 双边距 li里元素...

  • JS补充23

    查看滚动条的滚动距离 windox.pageXOffset/pageYOffset ie8及IE8以下不兼容 do...

  • js

    查看滚动条的滚动距离 windox.pageXOffset/pageYOffset ie8及IE8以下不兼容doc...

  • 兼容经验记录

    1、在没有涉及兼容性元素情况下,IE8中出现模块偏移,经过查找,发现嵌套inline-block下padding元...

网友评论

      本文标题:IE8以下 inline-block的兼容性问题

      本文链接:https://www.haomeiwen.com/subject/jideeqtx.html