inline-block在ie兼容性问题

最新推荐文章于 2020-06-20 18:06:14 发布
最新推荐文章于 2020-06-20 18:06:14 发布
阅读量383 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css3 ie兼容 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40024174/article/details/77713674
本文介绍了一种使inline-block元素在Internet Explorer 6和7中正常显示的方法，通过使用特定的CSS属性组合确保了跨浏览器的一致性。

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

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

css display inline block 兼容性问题写法
09-24
今天在写布局的时候发现的一个bug，如果不这样就达不到预期的效果，无法两行排列，原来ie6、ie7下对display:inline-block不支持，所以需要用到css hack才可以
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的bug，表现为相邻的`inline-block`元素之间会有一段看似多余的空白间隙，通常为6像素。这个问题同样存在于IE8，但不适用于更早...
inline-block属性在ie下兼容问题
ywj5200的专栏
11-14 732
在IE8的IE流量器中，对display:inline-block属性支持不佳，需要攻略，这是一个经典的BUG。      要解决这个问题，先让块元素变为内联，再使用（zoom:1 或float属性等来结局ie下的浮动或margin重叠等问题）触发块元素layout：       div{display:inline-block;_zoom:1;_display:inline;}  
解决 IE7 中 display:inline-block 失效的问题
weixin_30507269的博客
09-18 217
我们在做首页菜单选项的时候，通常会用 li 标签去做，通过对 li 标签设置样式: display:inline-block 可以让 li 标签横排显示。但是这样做，在 IE7 浏览器下面会有一个兼容性问题： display:inline-block 不会被识别。 　　如在下面的 html 结构中： <ul class="nav"> <li>&l...
inline-block Ie兼容写法
weixin_34195546的博客
03-27 125
一直知道 inline-block 兼容写法是这样div {display:inline-block;*display:inline; *zoom:1;…}，最近搜的时候发现有个博客解释得很清楚，对于dipaly:tabel-cell的兼容写法是以inline-block来代替tabel-cell，而ie7的兼容写法就成了这样div{display:table-cell;*...
inline-block兼容性问题及解决
dl429的专栏
11-13 1813
IE6、IE7不识别inline-block，但可以触发块元素。 其它主流浏览器均支持inline-block。 ji
让IE6/IE7支持display:inline-block属性的两种方法
09-25
在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如...尽管IE6/7的市场份额已经非常小，但在一些特定的环境下，如企业内部应用，仍可能需要考虑这些浏览器的兼容性问题。
inline-block带来的元素间距问题解决
09-24
如果不考虑IE6/7的兼容性，可以使用`float`属性代替`display: inline-block`。 接下来，我们简要回顾一下`block`和`inline`的基本特性： - **`display: block`**： - 占据整行，多个`block`元素会依次换行。 - ...
CSS属性display:inline-block用法深入理解
09-25
下面我们将深入探讨`display:inline-block`的用法及其浏览器兼容性问题。 首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-...
CSS教程：inline-block在各浏览器的显示
12-03
本文将详细解析`inline-block`的工作原理，以及如何处理浏览器兼容性问题。 首先，理解`inline-block`的基本概念至关重要。`inline-block`让元素在一行内显示，就像文本一样，但它们保持着块级元素的特性，比如可以...
如何解决IE6/IE7不识别display:inline-block属性
09-25
ie6，ie7的haslayout属性是个让人头疼的问题，想到一个属性display:inline-block;对！inline- block就是干这个事的，让一个元素既不换行又具有block元素的特性
IE6的inline-block
12-13
1、display:inline-block 让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。 2、IE中的inline-block IE6不支持这个属性，但IE8开始支持这个属性。 让IE6内联元素具备inline-block特性 由于inline-block会触发IE的layout，所以IE6中只要设置{display:inline-block;}即可。 让IE6区块元素具备inline-block属性，有两种方法 A、可以先触发layout，再设置为inline，需要注意的是这两个display必须在两个CSS声明
理解CSS中 display:inline-block
滴水穿石的专栏
12-23 1448
内联元素display:inline内联元素特点：排列成一行，元素高、行高、顶部和底部边距不可控制，宽度随其内部文字或图片自动扩展，典型的如, , 等。块级元素 display:block块级元素特点：分行排列，默认宽度为父容器的宽度100%，高度，行高，顶部和底部边距可控制。内联块级元素display:inline-block内联块级元素是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。可以说兼备内联元素和块级元素的特点。排列成一行，高宽等都可控制。   对
inline-block兼容低版本IE浏览器~~在IE6/Ie7和IE8中
涂涂
08-29 1306
在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了layo
ie实现inline-block
weixin_30826761的博客
08-16 108
inline-block:对象呈递为内联对象，对象的内容为块对象，宽高可变，与旁边的内联对象被呈递在同一行 ie实现： 写两个css,一个display:inline-block,出发layout;另一个display:inline,让块元素设为内联对象 转载于:https://www.cnblogs.com/danranysy/p/4733691.html...
由inline-block小例子引申出的一些问题，及IE6、IE7兼容性解决方案
setsunadoudou的博客
10-15 296
使用场景分析： 常见的对块与块之间的横向排列处理 　　对同级所有元素使用display:inline-block; ， 之后块与块直接会产生间隙问题 解决办法： 给父级设 font-size:0; 别...
IE6/IE7下：inline-block解决方案
u011927449的博客
06-20 238
IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性） IE中对内联元素使用...
解决IE不支持display:inline-block;
liona_koukou的博客
10-13 6948
对于IE不支持display:inline-block;的解决方法 .triangle-left{ height:0px; width:0px; border:30px solid #000; border-color:transparent #ebebeb transparent transparent; display:inline-block;
关于ie7下display：inline-block；不支持的解决方案。
weixin_34168700的博客
08-18 272
今天码的时候遇到这个问题了。 如果本身是内联元素的，把它的display属性设置设置为inline-block时，所有浏览器都是支持的。 相反，如果本身是块级元素的，把它设为display：inline-block; 那么ie6/ie7都是不支持的。 IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值