ie实现inline-block

最新推荐文章于 2020-05-11 20:04:59 发布
最新推荐文章于 2020-05-11 20:04:59 发布
阅读量71 收藏
点赞数
原文链接：http://www.cnblogs.com/danranysy/p/4733691.html
版权

inline-block:对象呈递为内联对象，对象的内容为块对象，宽高可变，与旁边的内联对象被呈递在同一行

ie实现：

写两个css,一个display:inline-block,出发layout;另一个display:inline,让块元素设为内联对象

 

转载于:https://www.cnblogs.com/danranysy/p/4733691.html

weixin_30826761
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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声明
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
总的来说，了解并掌握如何处理`inline-block`的浏览器差异，尤其是Firefox和IE8中的这个bug，是提升前端开发者技能的重要一环。在实践中，我们应当根据项目需求和浏览器兼容性选择最合适的布局策略，以确保网页在...
inline-block兼容低版本IE浏览器~~在IE6/Ie7和IE8中
涂涂
08-29 1205
在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了layo
CSS属性display:inline-block用法深入理解
09-25
对于内联元素，如`<a>`或`<span>`，在IE中设置`display:inline-block`虽然表面上看起来有效，实际上这是因为IE触发了"hasLayout"机制，而不是真正理解`inline-block`。对于块级元素，直接设置`display:inline-block`...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
然而，IE6和IE7这两个较老的浏览器对`display:inline-block`的支持并不完善，这给开发者带来了不小的困扰。为了解决这个问题，本文将详细介绍两种方法，使得这些旧版IE浏览器也能正确地处理`display:inline-block`。...
inline-block带来的元素间距问题解决
09-24
如果不考虑IE6/7的兼容性，可以使用`float`属性代替`display: inline-block`。 接下来，我们简要回顾一下`block`和`inline`的基本特性： - **`display: block`**： - 占据整行，多个`block`元素会依次换行。 - ...
由inline-block小例子引申出的一些问题，及IE6、IE7兼容性解决方案
setsunadoudou的博客
10-15 218
使用场景分析： 常见的对块与块之间的横向排列处理 　　对同级所有元素使用display:inline-block; ， 之后块与块直接会产生间隙问题 解决办法： 给父级设 font-size:0; 别...
如何解决IE6/IE7不识别display:inline-block属性
09-25
ie6，ie7的haslayout属性是个让人头疼的问题，想到一个属性display:inline-block;对！inline- block就是干这个事的，让一个元素既不换行又具有block元素的特性
inline-block在ie兼容性问题
Sol的博客
08-30 328
inline-block是CSS2.1属性，而大家经常会这么处理ie6、7下的inline-block.selector { display: inline-block; *display: inline; *zoom: 1; }
解决IE不支持display:inline-block;
liona_koukou的博客
10-13 6852
对于IE不支持display:inline-block;的解决方法 .triangle-left{ height:0px; width:0px; border:30px solid #000; border-color:transparent #ebebeb transparent transparent; display:inline-block;
浅谈IE6/7对display:inline-block的支持
call_me_hoyin
03-18 1623
到底什么是inline-block？        设置了inline-block的元素创建了一个行级的块容器，该元素内部即内容被格式化为一个块级元素，同时元素本身被格式化为一个行内元素。直白点就是inline-block的元素既有block元素可以设置高度宽度的特性，同时又具有inline元素默认不换行的特性。       通俗的分开对inline元素和block元素来说就是：inline元
让IE、Firefox、Chrome中的LI都支持display-block的兼容写法
Kinley.H的专栏
03-07 4740
转自：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
CSS:IE6/Ie7 display:inline-block 不起作用
把项目开发中遇到的问题记录下来
09-28 1946
在 IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素 拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline- block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了l...
关于ie7下display：inline-block；不支持的解决方案。
weixin_34168700的博客
08-18 228
今天码的时候遇到这个问题了。 如果本身是内联元素的，把它的display属性设置设置为inline-block时，所有浏览器都是支持的。 相反，如果本身是块级元素的，把它设为display：inline-block; 那么ie6/ie7都是不支持的。 IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发l...
inline-block属性在ie下兼容问题
ywj5200的专栏
11-14 668
在IE8的IE流量器中，对display:inline-block属性支持不佳，需要攻略，这是一个经典的BUG。      要解决这个问题，先让块元素变为内联，再使用（zoom:1 或float属性等来结局ie下的浮动或margin重叠等问题）触发块元素layout：       div{display:inline-block;_zoom:1;_display:inline;}  
display: inline 和 display: inline-block 的区别
jamey8383的专栏
05-11 157
inline 的 width 是占用一行最小的空间 (take the smallest amout of space, possible)，系统分配的。同理 block 是占用一行最大的空间，也是系统分配的。 inline-block 类似于 inline 但是可以设置 width 和 height。 inline 和 inline-block 有时显示中间会有gap，那是因为html 写的时候中间有空格或者空行，连在一起写就不会有gap了，如下代码所示。 <body>
html中display: inline-block;
最新发布
03-31
display: inline-block; 是CSS中的一个属性值，用于控制元素的布局和显示。具体来说，它将元素显示为一个行内容器，但是它的...需要注意的是，IE6/7对 display: inline-block; 支持不够友好，需要通过hack的方式解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值