如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。

现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。

下面是inline-block兼容的代码：

display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top;

但是大家有没有发现，在firefox，safari，opera，ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符，如果将 inline-block 元素间的换行符去掉，这3px的间距就会消失了。

有没有在不影响代码美观的情况下去掉间距尼，答案是有的。可以在inline-block的父元素中加上 font-size：0；然后在 inline-block讲字体设回来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
<title></title> 
<style type="text/css"> 
　　*{margin:0;padding:0;} 
　　body{font:400 12px/1.5 arial,sans-serif} 
　　li,.inline-block{display:inline-block;width:100px;background:#cdcdcd;font-size:12px;*display:inline;*zoom:1;vertical-align:top;} 
　　view sourceprint? .box{margin-top:10px;} 
　　.font0{font-size:0;} 
</style> 
</head> 
　　<body> 
　　　　<h1>写成一行的 line-block</h1> 
　　　　<ul> 
　　　　　　<li>我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block</li> 
　　　　</ul> 
　　　　<div class="box"> 
　　　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block

　　　　　　</div>

　　　　　　<h1>有换行符的 line-block</h1> 
　　　　　　<ul> 
　　　　　　　　<li>我是inline-block 我是inline-block 我是inline-block</li> 
　　　　　　　　<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li> 
　　　　　　　　<li>我是inline-block 我是inline-block 我是inline-block</li> 
　　　　　　</ul> 
　　　　　　<div class="box"> 
　　　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> 
　　　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> 
　　　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div> 
　　　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> 
　　　　</div>

　　　　<h1>父级使用了font-size:0的 line-block</h1> 
　　　　<ul class="font0"> 
　　　　　　<li>我是inline-block 我是inline-block 我是inline-block</li> 
　　　　　　<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li> 
　　　　　　<li>我是inline-block 我是inline-block 我是inline-block</li> 
　　　　</ul> 
　　　　<div class="box font0"> 
　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> 
　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> 
　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div> 
　　　　<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> 
　　</div> 
</body> 
</html>

使用font-size:0px 来制作跨浏览器的inline-block css属性的更多相关文章

  1. 判断浏览器是否支持某个css属性

    方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...

  2. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  3. 检测浏览器是否支持某个css属性

    以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...

  4. 测试浏览器是否支持某个CSS属性

    花了几个小时写了个API,为了兼容多种用法和测试花了不少时间,求鞭打.嘲笑和建议. <!DOCTYPE HTML> <html lang="zh-CN"> ...

  5. 判断浏览器是否支持指定CSS属性和指定值

    /** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...

  6. 原生JavaScript判断浏览器对CSS属性是否支持

    /*判断浏览器是否支持某个css属性*/ function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle ...

  7. Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...

  8. 跨浏览器的placeholder – 原生JS版

    转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...

  9. jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

随机推荐

  1. PAT甲级【2019年3月考题】——A1157 Anniversary【25】

    Zhejiang University is about to celebrate her 122th anniversary in 2019. To prepare for the celebrat ...

  2. shell中#*,##*,#*,##*,% *,%% *的含义及用法

    介绍下Shell中的${}.##和%%使用范例,本文给出了不同情况下得到的结果.假设定义了一个变量为:代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得 ...

  3. 63.Perfect Squares（完美平方数）

    Level:   Medium 题目描述: Given a positive integer n, find the least number of perfect square numbers (f ...

  4. 看不到但摸得到的捣蛋鬼---Zero Width Space

    看不到但摸得到的捣蛋鬼---Zero Width Space 1.情况如何? 昨天,"某某某"的代码出现了一个bug.大概是这个情况: 有一个提示信息,需要展示,大概这样: 这行文 ...

  5. SQL数据库—<2>数据库基本操作（CRUD）

    学习基本操作语句之前先简单了解数据库的基本数据类型: 数据类型:    二进制数据:以十六进制形式存储        固定长度:binary        可变长度:varbinary    字符数据 ...

  6. Juqery插件编写 基础说明

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. SET - 改变运行时参数

    樊伟胜SYNOPSIS SET [ SESSION | LOCAL ] name { TO | = } { value | 'value' | DEFAULT } SET [ SESSION | LO ...

  8. Ubuntu 16.04 install R language

    apt-get install r-base r-base-dev

  9. bzoj 2435

    http://www.lydsy.com/JudgeOnline/problem.php?id=2435 noi 你为什么那么diao, 这种世纪水题刷一道少一道啊... 我原来还以为是两边的联通块大 ...

  10. BZOJ 2301 莫比乌斯反演入门

    2301: [HAOI2011]Problem b Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函 ...