如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用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. StarUml3.10 Mac 注册key 破解

    /Applications/StarUML.app/Contents/Resources StarUML是用nodejs写的.确切的说是用Electron前端框架写的.新版本中所有的starUML源代 ...

  2. c# .netframwork 4.0 调用 2.0时报错 混合模式程序集是针对“v2.0.50727”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该程序集。

    “System.IO.FileLoadException”类型的未经处理的异常在 XXX.dll 中发生 其他信息: 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的 ...

  3. 逃脱 (简单BFS）

    题目传送门 G逃脱  题目描述 这是mengxiang000和Tabris来到幼儿园的第四天,幼儿园老师在值班的时候突然发现幼儿园某处发生火灾,而且火势蔓延极快,老师在第一时间就发出了警报,位于幼儿园 ...

  4. Https 代理 sslsocket

    1. 什么是SSLSocket JDK文档指出,SSLSocket扩展Socket并提供使用SSL或TLS协议的安全套接字. 这种套接字是正常的流套接字,但是它们在基础网络传输协议(如TCP)上添加了 ...

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

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

  6. NoWarningNoError（第八组）----Krad项目报告

    Alpha阶段展示及总结 Github地址:https://github.com/NiceKingWei/krad 项目地址:119.29.32.204/krad.html 一.项目概况 本组的项目为 ...

  7. 【知识强化】第四章 网络层 4.7 IP组播

    这节课我们来学习一下IP组播. 首先我们来看这样一个问题,IP数据报在网络当中传输的时候,有几种传输方式呢?三种,分别是单播.广播和组播(多播).这个组播呢也叫做多播,它们俩是一个意思.那这个组播是由 ...

  8. ECUST_Algorithm_2019_2

    简要题意及解析 1001 \(N\)个数分为\(K+8\)组,每组三个,记为\((a,b,c)\),方便起见要求\(a \leq b \leq c\),每组的代价是\((a-b)^2\),总代价为每组 ...

  9. JavaSE---System类

    1.概述 1.1 System类  代表当前java程序的运行平台: 1.2 System类  提供的类方法: getenv():获取系统所有的环境变量: getenv(String name):获取 ...

  10. 关于云计算三大服务模式LAAS,PAAS,SAAS的含义及区别

    根据NIST的权威定义,云计算有SPI,即SAAS,PAAS和LAAS三大服务模式,上层是SAAS,中间层是PAAS,底层是LAAS,一层支撑一层. LAAS(Infrastucture-as-a-S ...