如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用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. jQ无法设置checkbox变成选中状态

    设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文 代码如下: $("input" ...

  2. “希希敬敬对”队软件工程第九次作业-beta冲刺第五次随笔

    “希希敬敬对”队软件工程第九次作业-beta冲刺第五次随笔 队名:  “希希敬敬对” 龙江腾(队长) 201810775001 杨希                   201810812008 何敬 ...

  3. for语句基础求和练习

    结构 for(初始化表达式;条件表达式;循环后的操作表达式) { 循环体; } 1.求出1-10之间数据之和: class Hello2 { public static void main(Strin ...

  4. spark streaming 笔记

    spark streaming项目 学习笔记 为什么要flume+kafka? 生成数据有高峰与低峰,如果直接高峰数据过来flume+spark/storm,实时处理容易处理不过来,扛不住压力.而选用 ...

  5. 三次握手和四次挥手以及TCP标志位的详细介绍

    一.TCP标志位 在讲TCP三次握手和四次挥手之前,先说一下TCP标志位,方便后续的理解. 简单来说,TCP标志位的值代表了当前请求的目的. 标志位一共有6种,分别是: SYN(synchronous ...

  6. HTTP Request 422 Unprocessable Entity

    最近接了一个接口,在调用接口时,返回这个错误代码. 百度到的解释是:请求格式正确,但是由于含有语义错误,无法响应. 开始一直在纠结,语义错误到底是什么?对照了无数次参数名,传参方式,无解. 后来用Fi ...

  7. 链表反转&交换链表结点

    leetcode链表反转链接 要求摘要: 反转一个单链表 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1-&g ...

  8. springboot 2.x相关配置

    1.在配置文件中进行配置 #############指定项目中所有的日期类型返回json格式########### spring.jackson.date-format=yyyy-MM-dd HH:m ...

  9. FTPClient TLS 与 FTP 进行数据传输异常：Remote host closed connection during handshake

    环境:java JDK 1.8.org.apache.commons-net-3.6.jar.端口已放开 FTPClient ftpClient = new FTPClient(protocol, f ...

  10. QT blockingmaster例子学习

    dialog.h: #ifndef DIALOG_H #define DIALOG_H #include <QDialog> #include "masterthread.h&q ...