“display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

最新推荐文章于 2024-08-18 10:32:58 发布

王胜飞

最新推荐文章于 2024-08-18 10:32:58 发布

阅读量1.9w

点赞数 9

分类专栏：前端开发

本文链接：https://blog.csdn.net/Esther_Heesch/article/details/51340730

版权

前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在开始用display：inline-block的时候，只知道有baseline这么一说，而且当时记笔记解决了空隙问题，百度一堆文章，什么终极解决办法等等，还记录了一些问题，当时不明白，到今天才明白verticle-align的用法，原来可以这么用，以后可以随便玩inline-block，还有CSS hack，还有UC浏览器，这几天写的进哥的嘿凤梨首页在手机UC直接换行了，可能是间隙问题。。。bug。今天晚上弄了好久，才发现baseline和verticle-align，进一步认识了inline-block。

有用的是这句话：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

我直接用的百分比怼上去的~

在此贴上我的笔记

-----------------我是可爱的分割线-------------

1.宽度百分比，设置无间隔inline-block排版
inline-block 后的元素就是一个格式化为行内元素的块容器
默认inline-block之间会有间距，有很多清除间距的方法如html中间无空格；父盒子设置font-size: 0;-webkit-text-size-adjust:none;

inline-block 元素可设置 vertical-align 属性。

2.IE兼容inline-block：
IE5.5 后开始支持 inline-block，但是它所支持的 inline-block 不能等同于 CSS2.1 中的 inline-block，因为 IE5.5 比 CSS2.1 更早提出 inline-block 的概念并作为所谓的「私有属性值」使用，所以二者表现出来的效果是不完全一致。
IE 5.5、6、7 、8（Q）中 block 元素对 inline-block 支持不完整，如果要达到类似的效果，需要先设置为 display:inline，然后使用 zoom:1 等触发 hasLayout。
IE 5.5、6、7 、8（Q）中 inline 元素欲达到 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等均可。;(zoom触发haslayout)

3. 去除 inline-block 空隙终极解决方案
.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}
.dib {
display: inline-block;
*display:inline;
*zoom:1;
}

/*问题*/
1、display：inline-block，是基于baseline对齐的，大小不一会导致上下不齐，所以设置的时候最好设置vertical-align属性。
2、图片的宽度设置是100%自适应的，长宽高不一致会导致头像显示不完整，如上面，成半圆了，所以设置成max-height:100%；

-----------------我是可爱的分割线-------------

以下是转载的文章【http://www.xuebuyuan.com/825857.html】

故事：

最近在使用3个span（或div）制作带圆角边框的按钮时，按照常识，把span的display设置成inline-block，这样就可以设置span的width和height了，很爽的~

可是当我在中间的span写上文字的时候，神奇的事情发生了：

是的，写上字的那个span掉下来了，掉落，排版错位，很恶心的东西！使用Chrome的开发者工具查看，css和盒模型没有半点问题，郁闷中……

仔细观察发现，掉落的高度貌似跟文字的高度差不多，试了下，如果把文字字体加大，发现变成这样了：

是的，有文字span向上移动了一些！也就是说，掉落的那个、有文字的span的掉落程度跟它上面的文字的大小有关系，文字的大小代表什么？大号文字的重心明显比小号文字的重心高，于是把字体改回原来的样子，然后试着使用vertical-align直接修改文字的重心位置为：

vertical-align:top

得到这样的结果：

成功了！有文字的span跟没有文字的span对齐啦！

原因：

很明显是vertical-align设置错误的问题，谷歌了下vertical-align的用法，找到如下链接：

CSS属性Vertical Align使用方法讲解

http://www.jzxue.com/wangyesheji/css/201006/11-3937.html

大体意思是，vertical-align只用在display属性inline或inline-block的情况下才能使用，默认为baseline，就是“display属性inline或inline-block”的控件的底端跟文字的baseline（基线）对齐：

所以，在设置vertical-align之前，左右两个没有文字的span的底端跟中间那个有文字的span里的文字的基线对齐了，所以中间那个span就下降了文字高度的尺寸。而改变文字的尺寸后，基线随之被提高，然后中间有文字的那个span也就跟着上去了。设置vertical-align:top后，左右两边的span的top跟中间span的top对齐，问题解决了~

示例代码

顺带转载那篇文章吧~

《CSS属性Vertical Align使用方法讲解》（转自：http://www.jzxue.com/wangyesheji/css/201006/11-3937.html）

CSS有一个属性叫Vertical Align。当你第一次学习它的时候会有些困惑，因此我觉得我们可以通过它的用法来了解它。最基本的用法像这样：

img{
vertical-align: middle;
}

注意在这个应用案例中，它被应用到了img元素上。图片通常是行内元素，意味着它通常是和文字在一起的。但是到底”在一起”确切的是什么意思？这就是Vertical-align所要解决的。

有效值为：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

我认为最让人使人困惑的是，当大家尝试着给块级元素使用vertical-align时，却得不到任何结果。如果你有一个大一些div，其中包含一个小的div，你希望小的能够在大的之内垂直居中对其，vertical-align没法帮到你。Douglas Heriot有好方法来实现这种效果。

Baseline

vertical-align默认的值就是baseline（如果你没有做任何声明的话）。图片会和文字以文字基线为准对其。注意下行字母降到了基线以下。图片不会和下行字母的最下端对齐，那不是基线。