ie6/7块级元素兼容inline-block写法

最新推荐文章于 2021-06-19 10:02:37 发布
原创 最新推荐文章于 2021-06-19 10:02:37 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决IE6、7浏览器中使用display:inline-block样式时出现的独占一行问题的方法。提供了两种解决方案：一是使用*zoom:1 和 *+display:inline；二是添加float:left。

类似div的块级元素就算设置了 display:inline-block在ie6、7中如果没设置width就独占一行

解决方法一：+display:inline;*zoom:1; 一定要写在 display:inline-block后面

如：

.list li{display:inline-block; width:150px; *zoom:1;*+display:inline;}

解决方法二：添加float：left

兼容浏览器的css inline-block写法
09-24
总结来说，兼容浏览器的inline-block写法是对现代网页设计中兼容性问题的一种解决方式，通过添加特定的前缀规则来确保在旧版浏览器中也能正确地显示元素。虽然现代浏览器的使用率不断提高，但在开发过程中考虑旧版...
兼容IE6、IE7的min-width、max-width写法
09-24
然后，当遇到块级元素时，如`<div>`，在IE6中，由于不支持这些属性，预期的效果无法得到体现。为了解决这个问题，我们可以尝试将元素的`display`属性设置为`inline-block`，这样在大部分浏览器中可以实现宽度限制： ...
display:inline-block 在IE6中实现
weixin_30371469的博客
05-03 132
此文摘自：http://blog.sina.com.cn/hututuzhu前端之路 （博客） 1、IE6/7不识别inline-block，只是触发了layout，表现跟真实一样。2、IE6/7不完全支持inline-block，只对内联元素有效。 IE下块元素如何实现display:inline-block的效果？有两种方法：1、先使用display:inline-block...
display:inline-block兼容ie6/7的写法
湛庐无方
03-06 991
1、实例演示效果 2、 display:inline-block作用? 使用display:inline-block属性，可以使行内元素()或块元素能够不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！ 3、 什么时候会用到display:inline-block? 在网站布局中，很多时候，子元素中使用行内元素如span或块元素li标签且标签个
IE6兼容inline-block的方法
Robin@Front end
08-19 518
或许有朋友会对IE不支持 display:inline-block 属性，表示疑问或者反对。说：“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。 其实不然，在IE中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout， 从而使内
IE6/7下IE下块元素如何实现display:inline-block 的效果
czh304gw的博客
05-20 219
我们知道display:inline-block在IE6/7只对行内元素有作用，那么如何才能实现它对块元素的作用呢？有两种方法如下：   方法一：   .selector { display: inline-block } .selector { *display: inline }     注意要分开两个容器写，这个IE的bug，先定义了 display:inline-block，然...
ie支持html5块状元素,IE浏览器兼容性问题解决方案
weixin_32129187的博客
06-19 341
一、CSS常见问题1、H5标签兼容性解决方案：2、元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开的，就给它里边的块元素加上浮动float:left;3、第一块元素浮动，第二块元素加margin-left值等于第一块元素宽度，在IE6下会有间隙问题解决方案：不要用margin-left，给两个元素都加上浮动float:left;4、IE6下子元素超出父级宽高，会把父级宽高撑开，比...
模拟兼容性的 inline-block 属性
10-30
1. 为IE6和IE7触发hasLayout：可以通过设置 `zoom:1` 或者将元素的 `position` 属性设置为 `relative` 来触发IE的hasLayout特性，从而模拟 `inline-block` 的效果。 2. Firefox私有属性：旧版的 Firefox 2 使用 `-...
css display inline block 兼容性问题写法
09-24
具体来说，为了使display: inline-block在IE6/IE7中也能够兼容，可以采取以下几种写法： 1. 对于IE7及以上版本的IE浏览器，可以使用条件注释（仅限于HTML文件中的注释方式）来单独设置CSS规则： ```css * ...
翻译一下“layui-inline{position:relative;display:inline-block;*display:inline;*zoom:1;vertical-align:middle}”的实际效果
最新发布
07-11
3. **针对IE7的hack**：由于IE7及以下版本对`inline-block`的支持不完全，因此使用`*display:inline`（仅IE7能识别）来模拟部分`inline-block`行为，再配合`*zoom:1`（触发hasLayout）来使元素能够设置宽高。...
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声明
如何解决IE6/IE7不识别display:inline-block属性
09-25
ie6，ie7的haslayout属性是个让人头疼的问题，想到一个属性display:inline-block;对！inline- block就是干这个事的，让一个元素既不换行又具有block元素的特性
浅谈IE6/7对display:inline-block的支持
call_me_hoyin
03-18 1698
到底什么是inline-block？        设置了inline-block的元素创建了一个行级的块容器，该元素内部即内容被格式化为一个块级元素，同时元素本身被格式化为一个行内元素。直白点就是inline-block的元素既有block元素可以设置高度宽度的特性，同时又具有inline元素默认不换行的特性。       通俗的分开对inline元素和block元素来说就是：inline元
IE6:display:inline-block解决方案
zhoufmfk的专栏
01-27 355
IE6下对display:inline-block;支持的不是很好。网上有资料说：修改inline元素的display属性为inline-block后，所有的浏览器都是支持的。修改block元素的display属性为inline-block后，IE6及以下的老版浏览器都是不支持的。   display:inline-block;   将对象呈递为内联对象，但是对象的内容作为
IE6/7下如何实现inline-block
weixin_33708432的博客
01-11 111
ie6，ie7的haslayout属性是个让人头疼的问题。在做导航条的时候，一般会用到ul li结构，大多数时候我们是把li设置为浮动，让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上...
IE6/IE7下：inline-block解决方案
u011927449的博客
06-20 244
IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性） IE中对内联元素使用...
ie6/7 display:inline-block
Guoye的专栏
07-04 305
IE6/IE7下对display:inline-block的支持性不好，体现下面2点 inline元素的display属性设置为inline-block时，所有的浏览器都支持； block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的...
inline-block在IE6、7下的用法
10-13 121
在做导航条的时候，一般会用到ul li结构，大多数时候我是把li设置为浮动(float=left)，让其并排显示在同一行，最后再清除浮动(clear:both)防止影响后面的元素。 还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊...
ie6、7下inline-block
acm765152844的博客
05-02 335
1、inline元素(比如span,em等)的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 如果是内联元素使用了inline-block，那所有的浏览器显示都是正常的。（ie6、ie7中对内联元素使用display:inline-block，IE是不识别的，但使
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值