<style type="text/css">

body{

	margin:0 0;

	padding:0 0;

	font-size: 14;

	text-decoration:none;

　　 }

ul{

  padding:0;
  margin:0;

　　font-size:0px;　
}

li{

display:inline-block;

font-size: 14px;

min-height:50px;

width:100px;

*background-color:#c90;

border:1px dotted red;

display:-moz-inline-stack;/*火狐2不支持inline-block属性所以加火狐独有属性，效果类似inline-block*/

vertical-align:baseline;/*默认就是baseline,可以不设置，注意：一行内元素垂直方式为基线*/

zoom:1;/*IE6,7 不支持属性inline-block属性，zoom:1是触发IE元素的haslayout,使元素拥有布局，触发后haslayout=-1,然后设置*dispaly:inline,IE6,7支持属性前加（*）《独有》，参考另一篇博客 ，IE,6,7,haslayout=-1的情况下display:inline（内联）,相当于其他浏览器下的line-block（块级元素行内排列），按W3C标准，内联元素内不可出现块级元素 */

*display:inline;

_height: 250px;/*IE 6 不支持min-height:250px;其他浏览器会忽略_height:，参考另一票博客，IE6支持属性前加（*或_） ,IE7支持属性前加（*或+），其他浏览器则忽略 */

}

</style>

这种css 设置下li标签行内排列时，相互之间出现间隙，如图

<body>

<div>

	<ul>

	<li><div>1</div></li>

	<li><div>2</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	</ul>

<div>

</body>

　　

由于字体的设置导致出线间隙，把父节点ul {font-size:0px;} 设置为0，然后li中重新设置字体大小则可以去掉之间的间隙。这种方法不支持safari浏览器，其他浏览器则兼容。

所以我们加一些样式来兼容safari

word-space:-4px;字体间隔，可以兼容safari,但是这时候Chrome下li就会合在一起，如图：

两个li合在一起，这时候就用display:table;使Chrome达到兼容，最终解决方案就是

<style type="text/css">

body{

	margin:0 0;

	padding:0 0;

	font-size: 14;

	text-decoration:none;

　　 }

ul{

  padding:0;
  margin:0;

　font-size:0px;　
  word-spacing:-4px;/*兼容苹果的浏览器*/
　display:table;/*word-spacing用的情况下，谷歌li交错。目的：在使用word-spacing:-N的时候兼容谷歌*/
}

li{
word-spacing:normal;

display:inline-block;

font-size: 14px;

min-height:50px;

width:100px;

*background-color:#c90;

border:1px dotted red;

display:-moz-inline-stack;/*火狐2不支持inline-block属性所以加火狐独有属性，效果类似inline-block*/

vertical-align:baseline;/*默认就是baseline,可以不设置，注意：一行内元素垂直方式为基线*/

zoom:1;/*IE6,7 不支持属性inline-block属性，zoom:1是触发IE元素的haslayout,使元素拥有布局，触发后haslayout=-1,然后设置*dispaly:inline,IE6,7支持属性前加（*）《独有》，参考另一篇博客 ，IE,6,7,haslayout=-1的情况下display:inline（内联）,相当于其他浏览器下的line-block（块级元素行内排列），按W3C标准，内联元素内不可出现块级元素 */

*display:inline;

_height: 250px;/*IE 6 不支持min-height:250px;其他浏览器会忽略_height:，参考另一票博客，IE6支持属性前加（*或_） ,IE7支持属性前加（*或+），其他浏览器则忽略 */

}

</style>

li的inline-block出现间隙原因，解决方案的更多相关文章

  1. inline-block间隙原因和解决方法（web前端问题）

    申明:IE7无法测试,所以下面说的IE6指IE6和IE7 1,遇到的问题 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Styl ...

  2. inline-block各浏览器兼容以及水平间隙问题解决方案

    inline-block属性 This value causes an element to generate a block box, which itself is flowed as a sin ...

  3. inline-block 引发的间隙原因与解决方法

    这是一个常见的问题,但是一些新人没遇到过可能不会发现,现在我对这种现在进行了分析与总结 设置一些元素为块级元素时一般这么写 li{display:inline-block; *display:inli ...

  4. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  5. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  6. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. 行内块inline-block元素之间出现空白间隙原因及解决办法

    首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...

  8. li:hover在ie6下失效的解决方案

    li:hover在ie6下是无效的,它只在ie7以下版本有效.要解决这个问题有两个解决方法.一个是用js来解决,但是这种方法我不喜欢,因为它必需把js代码和css代码都放在html文件中.第二种是在每 ...

  9. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

随机推荐

  1. 以前写的canvas 小游戏 贪吃蛇代码

    效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...

  2. [CF254C]Anagram(2019-11-15考试)

    题目大意 给你两个长度相同的字符串\(A,B\),要求改变字符串\(A\)中最少的字符,使得字符串\(A\)在排序后和字符串\(B\)相同.输出改变后的字符串\(A\),若多解,输出字典序最小的.\( ...

  3. Linux学习笔记之iptables学习笔记

    iptables系列学习推荐: http://www.zsythink.net/archives/category/%e8%bf%90%e7%bb%b4%e7%9b%b8%e5%85%b3/iptab ...

  4. 一次golang应用的docker部署经历

    开发平台win10,服务器centos7.5 编写dockerfile # scratch 为空镜像,因为golang的build的可执行文件不需要什么环境 FROM scratch # 作者署名 M ...

  5. C#使用表达式树动态调用方法并实现99乘法表

    我们在使用C#编程的时候,经常使用反射来动态调用方法,但有时候需要动态的生成方法,下面介绍使用表达式树的方式来自动生成方法,并调用. 首先需要说明什么是表达式,熟悉Linq的程序猿都用过类似于下面的代 ...

  6. Javascript文件上传插件

    jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能. 支持预览图片.音频和视频,支持跨域上传和客户端图片缩放,支持 ...

  7. datax分析与思考(一)

    Datax 总体流程图 先看执行的第一个步骤: 在最上层抽象类,这个里面相当于获取全局公共信息,java入口部分就是这个Engine的main方法直接启动 Engine 启动 com.alibaba. ...

  8. 使用 HttpWebRequest 类做 POST 请求没有应反

    这几天给系统做第三方集成, 需要调用另一个软件的一个接口, 通过 HTTP 的方式调用,调用代码也挺简单的: string serviceUrl = string.Format("{0}/{ ...

  9. 【开发笔记】- 修改tomcat默认的编码方式

    tomcat8以后默认编码格式是utf-8:7之前的都是iso8859-1 如果默认情况下,tomcat使用的的编码方式:iso8859-1 修改tomcat下的conf/server.xml文件 找 ...

  10. [转] Cache 和 Buffer的区别

    程序员开发过程中经常会遇到“缓存”.“缓冲”等相似概念,之前没有特别关注,现在停下来做一下总结,才能更好地前行. 先来下枯燥的概念: 1.Cache:缓存区,是高速缓存,是位于CPU和主内存之间的容量 ...