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 属性
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
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的bug，表现为相邻的`inline-block`元素之间会有一段看似多余的空白间隙，通常为6像素。这个问题同样存在于IE8，但不适用于更早...
inline-block的兼容性问题
weixin_34418883的博客
10-09 128
兼容性： IE6、IE7不识别inline-block但可以触发块元素。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。 2、直接设置display:inline，使用zoom:1触发lay...
inline-block 的兼容性 与 空白间距解决方案
SirM2z的博客
04-17 633
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 兼容性
weixin_30520015的博客
12-18 118
inline-block 兼容性 通常网页模板都需要动态添加或删除内容，在做网页导航的时候，需要nav中的ul能够居中并实现自适应拓展，如果ul是固定的长度很好实现居中，只需要设置margin:0auto;就行。但是这里ul的长度是不确定的，设置了margin-left就没法自适应居中了。在FF和IE7以上的浏览器中，设置.nav{text-align:center;},.nav...
display:inline-block 兼容性
weixin_40079913的博客
08-09 381
IE6、IE7不识别inline-block， 支持宽高，不支持在一行显示。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 原理 : 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。 兼容所有浏览器的方法是： { display:inline-block; *display:inline;...
inline-block带来的元素间距问题解决
09-24
本文主要关注`inline-block`元素的间距问题及其解决方案，同时也会对比`block`和`inline`的特性。 首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高...
浅谈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 属性
10-30
在前端开发中，`display:inline-block` 属性的使用可让元素既具备内联元素（`inline`）的特性，又具备块级元素（`block`）的特性。内联元素如 `<span>` 默认是水平排列的，不能设置宽高；块级元素如 `<div>` 则能够...
关于inline-block的兼容测试
布丁黑板报
10-19 1473
首先说下inline、block、inline-block的区别 inline：行内元素显示前后无换行符 block：块级元素 inline-block： 行内块元素 重点说下inline-block这个属性。经过测试当display：inline-block的时候，本身为块元素的HTML标签（比如 div等）应用此样式在IE8+、chrome、firefox 会将块元素转换成行内元素，但
display:inline-block的兼容性问题
jason_lyp的博客
04-05 5668
兼容性： IE6、IE7不识别inline-block，  支持宽高，不支持在一行显示。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 原理 : 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。 兼容所有浏览器的方法是： { displ
如何实现浏览器兼容版的inline-block显示
foxgoste的博客
08-14 1006
inline元素的display属性设置为inline-block时触发layout属性，简单的认为IE6、7可以支持；而block元素不支持。 对block元素，有两种方法可以解决： 1. 对block元素定义display:inline-block,再在另一个CSS声明中定义display:inline，让block元素变为inline元素；这样可以实现inline-b
display:inline-block兼容ie6/7的写法
ac601458466的博客
10-01 4244
display:inline-block兼容ie6/7的写法 实例演示效果 display:inline-block作用? 使用display:inline-block属性，可以使行内元素或块元素能够变成行内块元素，简单直白点讲就是不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！什么时候会用到display:inline-block? 在网站布局中，很多时候
inline-block兼容及间隙问题
weixin_34067102的博客
01-20 112
一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。 注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致 原因分析：使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生...
让IE、Firefox、Chrome中的LI都支持display-block的兼容写法
Kinley.H的专栏
03-07 4807
转自：http://www.cnblogs.com/langzs/archive/2012/03/08/2385087.html   在制作简易模板时，店招的导航条结构大致如下： div class="nav"> ul> li>a href="#">em>首页em>a>li> li>...li> .... ul> div
inline-block在ie兼容性问题
Sol的博客
08-30 360
inline-block是CSS2.1属性，而大家经常会这么处理ie6、7下的inline-block.selector { display: inline-block; *display: inline; *zoom: 1; }
safari 下 inline-block 对齐问题
齐枫的博客
01-24 1259
safari 下 inline-block 对齐问题 safari 浏览器 对于 inline-block 没有默认的vertical-align 样式，今天项目遇到鼠标放在inline-block上面的时候元素突然不对齐的现象； 解决办法，设置vertical-align:top ...
CSS深度解析：display:inline-block属性及空隙问题解决方案
`display:inline-block`是CSS布局中的一个强大工具，但需要理解其工作原理和潜在的兼容性问题，以便在不同浏览器和项目需求中灵活应用。通过掌握这一属性，开发者能够创建更加灵活且适应性强的网页布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值