<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. [C++进阶] 数据结构与算法

    1 出栈&入栈问题 一个栈的入栈序列为ABCDE,则不可能的出栈序列为?(不定项选择题) A:ECDBA  B:DCEAB   C:DECBA   D:ABCDE   E:EDCBA 正确答案 ...

  2. 《Linux就该这么学》培训笔记_ch19_使用PXE+Kickstart无人值守安装服务

    <Linux就该这么学>培训笔记_ch19_使用PXE+Kickstart无人值守安装服务 文章最后会post上书本的笔记照片. 文章主要内容: 无人值守系统 部署相关服务程序 配置DHC ...

  3. 修改Mac新建文件、文件夹的默认权限

    Mac 新建文件和文件夹默认 当前用户才有读和写的权限,其他用户只有读的权限 修改Mac新建文件.文件夹的默认权限的步骤如下: 1.打开 “终端” 2.在终端中输入以下命令: 创建文件时,从默认值(对 ...

  4. 【C++】C++中基类的析构函数为什么要用virtual虚析构函数？

    正面回答: 当基类的析构函数不是虚函数,并且基类指针指向一个派生类对象,然后通过基类指针来删除这个派生类对象时,如果基类的析构函数不是虚析构函数,那么派生类的析构函数就不会被调用,从而产生内存泄漏 # ...

  5. Mysql常见注意事项小记

    1. 排序问题 正常如果按照某字段升序排列,空值会排到有值的前面;如果逆序排序空值排在最后. 有时候我们需要该字段为空的行数据要排到最后面去,这时只需要: order by second_parent ...

  6. NETCore使用带有权限验证的Swagger

    原文:NETCore使用带有权限验证的Swagger 文章目录 Swagger 什么是Swagger NuGet安装 Startup注册Swagger 设置默认首页打开Swagger 为接口添加注释 ...

  7. XAML加载的四种方式

    XAML加载与编译可以分为四种: 仅使用代码进行WPF程序的生成 使用代码和未编译的标记 使用代码和编译过的BAML 1.只是用代码进行窗体的生成:优点是可以随意定制应用程序,缺点是没有可视化编辑窗口 ...

  8. Google Chrome 浏览器JS无法更新解决办法

    JS无法更新原因: 浏览器为了加载快,默认是按照自定规则更新缓存,非实时更新. 我们在开发的时候,JS变动很快,需要即时让浏览器加载最新文件,也就是禁用浏览器缓存 (1)使用F12进入开发者模式,找到 ...

  9. @Valid注解的使用springmvc pojo校验

    @Valid注解用于校验,所属包为:javax.validation.Valid. ① 首先需要在实体类的相应字段上添加用于充当校验条件的注解,如:@Min,如下代码(age属于User类中的属性): ...

  10. [08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up IDEA2019的database插件无法链接mysql的解决办法（08001错误）

    [08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up. 点击这里 ...