浅谈inline-block及解决空白间距
2016-01-08 18:37
274 查看
如今有很多网站都用上了 inline-block 属性,比如 {display:inline-block; *display:inline; *zoom:1},以上 css 代码随处可见。很多人看见 *display:inline; *zoom:1 就下意识的认为:哦,原来 inline-block 这个属性 ie6 和 ie7 不支持。那么 ie6,7 真的不支持 display:inline-block 吗?
事实上,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美。具体的请阅读淘宝UED官方博客——一丝所写的《display:inline-block 前世今生》。
当我们使用 inline-block 的时候,就会产生“空白间隙”问题。代码如下:
![](http://img.blog.csdn.net/20160108183519356?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
下面我们就来说说这个“空白间隙”是如何产生的,以及解决办法。
先来说说“空白间隙”是怎么产生的?先看下源代码:
从上面的代码我们很难发现产生“空白间隙”的问题。其实这个问题是我们写代码的习惯所造成的。平时我们写代码,为了使代码看上去“层级分明”,通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
既然我们已经知道产生问题的原因了,那么就很好解决该问题。空白符也是字符,只要是字符就会联想到字体,字体大小之类的。所以去除空白符的存在只需要设置字体大小为零就行了(font-size:0;)。修改已上代码:
可以看到在 ie8,firefox,chrome 和 opera 浏览器下已经没有问题了,但是在 safari 浏览器下还是有问题。
关于 safari 浏览器的兼容,请阅读大漠写的《如何解决inline-block元素的空白间距》。
最后整理:
事实上,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美。具体的请阅读淘宝UED官方博客——一丝所写的《display:inline-block 前世今生》。
当我们使用 inline-block 的时候,就会产生“空白间隙”问题。代码如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>inline-block</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> li{ display:inline-block; *display:inline; *zoom:1; } </style> </head> <body> <ul> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> </ul> </body> </html>效果图如下:
下面我们就来说说这个“空白间隙”是如何产生的,以及解决办法。
先来说说“空白间隙”是怎么产生的?先看下源代码:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>inline-block</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> li{ display:inline-block; *display:inline; *zoom:1; } </style> </head> <body> <ul> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> </ul> </body> </html>
从上面的代码我们很难发现产生“空白间隙”的问题。其实这个问题是我们写代码的习惯所造成的。平时我们写代码,为了使代码看上去“层级分明”,通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
既然我们已经知道产生问题的原因了,那么就很好解决该问题。空白符也是字符,只要是字符就会联想到字体,字体大小之类的。所以去除空白符的存在只需要设置字体大小为零就行了(font-size:0;)。修改已上代码:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>inline-block</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> ul{ font-size:0; } li{ display:inline-block; *display:inline; *zoom:1; } </style> </head> <body> <ul> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> </ul> </body> </html>
可以看到在 ie8,firefox,chrome 和 opera 浏览器下已经没有问题了,但是在 safari 浏览器下还是有问题。
关于 safari 浏览器的兼容,请阅读大漠写的《如何解决inline-block元素的空白间距》。
最后整理:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>inline-block</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> ul{ font-size:0; letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整,个人经验,font-size:14px;则都为-2*/ word-spacing: -8px; } li{ display:inline-block; *display:inline; *zoom:1; letter-spacing:normal; word-spacing:normal; } </style> </head> <body> <ul> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> </ul> </body> </html>测试浏览器:ie6,ie7,ie8,chrome,firefox,safari,opera。
相关文章推荐
- Ember.js--入门
- js兼容火狐显示上传图片预览效果的方法(读取字节)
- 维护被攻击后的服务器的方法
- 每天学习十分钟11之JavaScript
- 【CUDA】CUDA开发环境搭建
- javascript单例模式与桥接模式
- BZOJ 1038 ZJOI2008 瞭望塔 半平面交
- mysql查询并导出指定数据,select from,where,into outfile导出,fields terminated by分隔导出数据
- GP数据库开发语句
- Java日期时间处理
- CentOS 6.5下Redis安装配置记录
- 菜鸟学python(5) while语句
- html5实战2
- Codeforces Wilbur and Array
- iterator迭代器
- GP数据库系统管理语句
- UIView基础
- LeetCode题解——Power of Three
- log4cxx安装和使用
- 一句css代码让网站变灰