如何实现浏览器兼容版的inline-block显示

最新推荐文章于 2024-06-25 10:07:14 发布
转载 最新推荐文章于 2024-06-25 10:07:14 发布 · 1k 阅读 · 0
标签
#ie 6
本文介绍了解决IE6、7浏览器下block元素使用inline-block布局的问题。通过利用IE特有的BUG或zoom属性来实现兼容性解决方案。具体方法包括使用display属性的特殊设置或结合zoom属性。

inline元素的display属性设置为inline-block时触发layout属性，简单的认为IE6、7可以支持；而block元素不支持。

对block元素，有两种方法可以解决：


1. 对block元素定义display:inline-block,再在另一个CSS声明中定义display:inline，让block元素变为inline元素；这样可以实现inline-block的效果。这种方法用的是IE的BUG.代码：

div {display:inline-block;} 
div {display:inline;}

2. 对block元素定义display:inline,然后用zoom触发其layout属性；以此实现inline-block的效果。代码： 
div {display:inline-block; *zoom:1;*display: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
AI大模型企业应用实战：Prompt让LLM理解知识
最新发布
2401_84204413的博客
06-25 3115
• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；
span 使用inline-block处理流式布局
u012381782的博客
07-03 355
inline-block兼容及间隙问题
weixin_34067102的博客
01-20 193
一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。 注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致 原因分析：使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生...
inline-block 兼容性
weixin_30520015的博客
12-18 172
inline-block 兼容性 通常网页模板都需要动态添加或删除内容，在做网页导航的时候，需要nav中的ul能够居中并实现自适应拓展，如果ul是固定的长度很好实现居中，只需要设置margin:0auto;就行。但是这里ul的长度是不确定的，设置了margin-left就没法自适应居中了。在FF和IE7以上的浏览器中，设置.nav{text-align:center;},.nav...
inline-block 的兼容性 与 空白间距解决方案
SirM2z的博客
04-17 764
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显示
水荷的博客
09-20 485
display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，比如：span,a,lable,cite,em等标签. 如何实现块级元素(div,p,h1,form,ul等)的inline-block效果? 解决办法如下：display: inline-block; *display: inline; *zoom: 1;通过 *zoom: 1;
CSS课堂交流区问题汇总
后乐的博客
05-15 9434
网易微专业--前端开发工程师--CSS课堂交流区问题汇总
inline ， block， inline-blockd的区别
热门推荐
xuanwugang的博客
05-09 1万+
1.解释一下display的几个常用的属性值，inline ， block， inline-blockinline:使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.block:使元素变成块级元素，...
理解display:inline、block、inline-block（兼容性）
ruoyiqing的专栏
09-17 1014
要理解display:inline、block、inline-block的区别，需要先了解HTML中的块级（block）元素和行级（inline）元素的特点，行内元素也叫内联元素。 块级元素 总是另起一行开始； 高度，行高以及顶、底边距都可以控制； 宽度缺省是它所在容器的100%，除非设定一个宽度。 块级元素通常作为其他元素的容器，可以容纳内联元素和其他块元素。blo
两个inline-block元素靠近为什么有间隙？
CRMEB小程序商城的博客
03-28 2151
前言 相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧 一、问题描述 废话不多说,上图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
inline-block的兼容性问题
weixin_34418883的博客
10-09 183
兼容性： IE6、IE7不识别inline-block但可以触发块元素。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。 2、直接设置display:inline，使用zoom:1触发lay...
display:inline-block的兼容性问题
jason_lyp的博客
04-05 5815
兼容性： IE6、IE7不识别inline-block，  支持宽高，不支持在一行显示。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 原理 : 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。 兼容所有浏览器的方法是： { displ
关于ie7下display：inline-block；不支持的解决方案。
weixin_34168700的博客
08-18 331
今天码的时候遇到这个问题了。 如果本身是内联元素的，把它的display属性设置设置为inline-block时，所有浏览器都是支持的。 相反，如果本身是块级元素的，把它设为display：inline-block; 那么ie6/ie7都是不支持的。 IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发l...
display:inline-block兼容ie6/7的写法
ac601458466的博客
10-01 4357
display:inline-block兼容ie6/7的写法 实例演示效果 display:inline-block作用? 使用display:inline-block属性，可以使行内元素或块元素能够变成行内块元素，简单直白点讲就是不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！什么时候会用到display:inline-block? 在网站布局中，很多时候
display:inline-block 兼容性
weixin_40079913的博客
08-09 453
IE6、IE7不识别inline-block， 支持宽高，不支持在一行显示。 其它主流浏览器均支持inline-block。 解决IE6、IE7兼容性的方法： 原理 : 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。 兼容所有浏览器的方法是： { display:inline-block; *display:inline;...
inline-block兼容性问题及解决
dl429的专栏
11-13 1846
IE6、IE7不识别inline-block，但可以触发块元素。 其它主流浏览器均支持inline-block。 ji
block标签、inline标签、inline-block标签的特点
记录所学所思
06-10 4748
欢迎关注朋友的公众号“证件照一键换底色”，可处理证件照（换背景、换底色、换正装） block标签(比如div) 1.默认独占一行显示 2.没有宽度时，默认撑满一排 3.支持所有css命令 inline（内嵌）标签（比如span） 1.默认同行可以继续跟同类型标签 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margi...
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1528
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
CSS之使用display:inline-block来布局
weixin_30698527的博客
05-13 1万+
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值