如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用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. C++中一个类(非继承类)对象，所占内存空间大小

    离职后在家里带了半年多了,这半年多里没有编写过一行代码,倒是看过一些书,但是差不多也都是囫圃吞枣.房子也快要装修,也得赶快找一个工作了,不然养车,还要玩摄影,没收入的日子真是不好过啊.呵呵. 按惯例, ...

  2. 深度学习大规模MIMO中的功率分配

    摘要-本文使用深度学习的方法在大规模MIMO网络的下行链路中执行max-min和max-prod功率分配.更确切地说,与传统的面向优化的方法相比,训练深度神经网络来学习用户设备(UE)的位置和最优功率 ...

  3. 45-python基础-python3-字符串-常用字符串方法(三)-startswith()-endswith()

    4-字符串方法 startswith()和 endswith() startswith()和 endswith()判断字符串是否以某个字符串开始或结尾,存在返回 True,否则,方法返回 False. ...

  4. ant打包遇到的问题

    \build\build.xml:350: Problem: failed to create task or type foreach Cause: The name is undefined. A ...

  5. Java中的动态代理（jdk和cglib）

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类 ...

  6. Struts2后台使用Request和Session方法

    在Struts2后台,如果需要使用Request和Session的话,可以通过下面的方法: 主要是利用了com.opensymphony.xwork2.ActionContext类以及ora.apac ...

  7. Zabbix 一键部署

    #!/bin/bash #Zabbix 一键部署脚本 #安装zabbix3. src_home=`pwd` echo -n "正在配置iptables防火墙……" /etc/ini ...

  8. go语言从例子开始之Example3.变量

    在 Go 中,变量 被显式声明,并被编译器所用来检查函数调用时的类型正确性 package main import "fmt" func main() { var 声明 1 个或者 ...

  9. JS数字转字符串的方法(number to string)

    一.双点解析 ..toString(); 二.括号先计算再转换 ().toString(); 三.加空串 + ''

  10. centos7 iperf3安装

    iperf3快速安装 wget -O /usr/lib/libiperf.so.0 https://iperf.fr/download/ubuntu/libiperf.so.0_3.1.3 wget ...