inline-block兼容性问题及解决

最新推荐文章于 2019-08-09 18:11:16 发布
最新推荐文章于 2019-08-09 18:11:16 发布
阅读量1.7k 收藏
点赞数
分类专栏： 前端 css(3) 文章标签： ie6 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dl429/article/details/41077563
版权

IE6、IE7不识别inline-block，但可以触发块元素。

其它主流浏览器均支持inline-block。

解决方法：

display:inline-block;

zoom:1; /*IE 下触发 hasLayout*/

*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

扎实地在跑步
关注
专栏目录
inline-block带来的元素间距问题解决
09-24
本文主要关注`inline-block`元素的间距问题及其解决方案，同时也会对比`block`和`inline`的特性。 首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高...
safari 下 inline-block 对齐问题
齐枫的博客
01-24 1248
safari 下 inline-block 对齐问题 safari 浏览器 对于 inline-block 没有默认的vertical-align 样式，今天项目遇到鼠标放在inline-block上面的时候元素突然不对齐的现象； 解决办法，设置vertical-align:top ...
display:inline-block的兼容性问题
jason_lyp的博客
04-05 5638
兼容性： IE6、IE7不识别inline-block，  支持宽高，不支持在一行显示。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 原理 : 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。 兼容所有浏览器的方法是： { displ
inline-block 兼容性
weixin_30520015的博客
12-18 108
inline-block 兼容性 通常网页模板都需要动态添加或删除内容，在做网页导航的时候，需要nav中的ul能够居中并实现自适应拓展，如果ul是固定的长度很好实现居中，只需要设置margin:0auto;就行。但是这里ul的长度是不确定的，设置了margin-left就没法自适应居中了。在FF和IE7以上的浏览器中，设置.nav{text-align:center;},.nav...
inline-block 的兼容性 与 空白间距解决方案
SirM2z的博客
04-17 617
inline-block inline-block 兼容性 兼容 IE > 7，兼容（IE < 8）写法: .father{ display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */ zoom:1; *display:inline; /* IE6、7 block 元素 */ } 或： /* IE 的一个经典 bug ...
模拟兼容性的 inline-block 属性
10-30
在前端开发中，`display:inline-block` 属性的使用可让元素既具备内联元素（`inline`）的特性，又具备块级元素（`block`）的特性。内联元素如 `<span>` 默认是水平排列的，不能设置宽高；块级元素如 `<div>` 则能够...
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的bug，表现为相邻的`inline-block`元素之间会有一段看似多余的空白间隙，通常为6像素。这个问题同样存在于IE8，但不适用于更早...
浅谈inline-block及解决空白间距
11-30
在网页布局中，`display: inline-block` 是一个非常有用的 CSS 属性，它允许元素表现...通过设置 `font-size: 0` 或 `letter-spacing`，以及 IE 特性 hack，我们可以有效地解决这些问题，确保在各种浏览器中的兼容性。
CSS属性display:inline-block用法深入理解
09-25
下面我们将深入探讨`display:inline-block`的用法及其浏览器兼容性问题。 首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-...
兼容性的 inline-block 属性
01-19
一年前网上还找不到关于 inline-block 属性的文章，为了方便大家更好的理解该属性，当时总结整理了篇《display:inline-block的深入理解》。 而现在对于 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性（注：原来只有 Opera、Safari 支持），但 IE6、IE7 可以通过触发 hasLayout 来模拟，Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性（这两个属性的比较引用自秦歌的《di
display:inline-block兼容ie6/7的写法
ac601458466的博客
10-01 4229
display:inline-block兼容ie6/7的写法 实例演示效果 display:inline-block作用? 使用display:inline-block属性，可以使行内元素或块元素能够变成行内块元素，简单直白点讲就是不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！什么时候会用到display:inline-block? 在网站布局中，很多时候
inline-block的兼容性问题
weixin_34418883的博客
10-09 117
兼容性： IE6、IE7不识别inline-block但可以触发块元素。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。 2、直接设置display:inline，使用zoom:1触发lay...
display:inline-block 兼容性
weixin_40079913的博客
08-09 368
IE6、IE7不识别inline-block， 支持宽高，不支持在一行显示。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 原理 : 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。 兼容所有浏览器的方法是： { display:inline-block; *display:inline;...
关于inline-block的兼容测试
布丁黑板报
10-19 1454
首先说下inline、block、inline-block的区别 inline：行内元素显示前后无换行符 block：块级元素 inline-block： 行内块元素 重点说下inline-block这个属性。经过测试当display：inline-block的时候，本身为块元素的HTML标签（比如 div等）应用此样式在IE8+、chrome、firefox 会将块元素转换成行内元素，但
关于ie7下display：inline-block；不支持的解决方案。
weixin_34168700的博客
08-18 236
今天码的时候遇到这个问题了。 如果本身是内联元素的，把它的display属性设置设置为inline-block时，所有浏览器都是支持的。 相反，如果本身是块级元素的，把它设为display：inline-block; 那么ie6/ie7都是不支持的。 IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发l...
[转]css中display:inline-block
weixin_30922589的博客
08-04 213
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。display:inline-block简单来说就是将对象呈递为内联对象，但是对...
inline-block在ie兼容性问题
Sol的博客
08-30 351
inline-block是CSS2.1属性，而大家经常会这么处理ie6、7下的inline-block.selector { display: inline-block; *display: inline; *zoom: 1; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值