inline-block兼容及间隙问题

binaryTree 发布于2019-08-01 15:01 / 547人阅读

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。

一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。

注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致

原因分析：使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生效的，所以也就有了同其它浏览器一致的显示效果

2. 解决IE6、IE7兼容性的方法：

2.1 首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现行内元素，此时layout的特性不会消失。(两个display 要先后放在两个 CSS 样式声明中才有效果.)

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

2.2 直接设置display:inline，使用zoom:1触发layout。

兼容所有浏览器的方法是：

div{ display:inline-block;*display:inline;*zoom:1; }

二、间隙 1. 产生间隙的例子：

行内元素（如a）、块元素(如div)设置display:inline-block后，以及真正意义上的inline-block水平呈现的元素（如input），在换行显示或空格分隔了的情况在水平显示上会有间距产生

2. 去除间隙的方法

2.1 移除空格(代码可读性变差)

    

    
    这是一
    这是二
    这是三

注：a 标签为display:inline-block的情况下

2.2 使用margin负值（margin负值的大小与上下文的字体和文字大小相关，请参考“基于display:inline-block的列表布局”）

a{
    display: inline-block；
       margin-right:-3px;
}

2.3 使用font-size:0

div {
    font-size: 0;
    -webkit-text-size-adjust:none;  /*去除谷歌最小字体的限制，新版谷歌中已经失效*/
}
div a {
    font-size: 12px;
}

2.4 使用letter-spacing

div {
    letter-spacing: -3px;
}
div a {
    letter-spacing: 0;
}

注：Opera浏览器下有个蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了

2.5 使用word-spacing

div {
    word-spacing: -6px;
}
div a {
    word-spacing: 0;
}

3. 其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

以下是一个名叫RayM的人提供的方法：

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}
.nav li { *display:inline;}

参考文章：张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

云服务器 GPU云服务器兼容问题兼容性问题 Js的兼容问题 html图片兼容问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49707.html

inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

learn_shifeng 2019-08-28 18:30 评论0 收藏0
关于css兼容性问题及一些常见问题汇总

摘要：解决办法添加复制内容到剪贴板一行右侧第一个元素有双边距一行左侧第一个元素有双边距在，下，自身没浮动，但是的内容有浮动，下边就会产生一个间隙解决办法给加浮动给加注意当下最小高度问题，和的间隙问题共存的时候，给加浮动才能解决。目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。 1.圆盘时钟有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下...

seanlook 2019-04-23 11:43 评论0 收藏0
white-space:nowrap 的妙用

摘要：对于多个元素同在同一行的布局，如比较常见的是轮播。因此最好显式设置的垂直方向上的对齐。做法一的案例有淘宝首页的主轮播通过子元素浮动，父元素清除浮动。可看出这与与应用了的文本容器效果一样。上的效果，应该也一样。对于多个元素同在同一行的布局，如比较常见的是轮播。下面我将探讨这这一布局的做法：首先约定html结果如下： div.row div.col div.col di...

qqlcbb 2019-08-30 12:55 评论0 收藏0
【整理】几种解决inline-block间隙的方案

摘要：有基础的朋友可以直接跳过序言，直接看方案序有几种属性是内联对象，比如标签等，可以堆在一起显示，宽高由内容决定，不能设置是块对象，比如标签等，要占一整行，但是宽高可以自定义为了弥补和的不足，又扩充了属性可以将对象呈递为内联对象，而内容作为 showImg(https://segmentfault.com/img/remote/1460000010989238); 有基础的朋友可以直接跳...

array_huang 2019-08-29 13:20 评论0 收藏0
CSS基础篇--如何解决inline-block元素的空白间距

摘要：先看结构代码在的元素之间存在的空白如图第一种就是改变结构结构一这种方法接近标签换行格式的写法，也更趋近阅读。当然有些文章介绍使用来解决，这也是跟元素的字号有极大的关系。如果元素是一个，则查找文档内容。如果节点是元素节点，则属性将返回。早上在博客中有人提了这样一个问题：li元素inline-block横向排列，出现了未知间隙，我相信大家在写页面的时候都遇到过这样的情况吧。我一般遇到这...

JowayYoung 2019-08-28 18:16 评论0 收藏0