li的inline-block出现间隙原因，解决方案
<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出现间隙原因，解决方案的更多相关文章
- inline-block间隙原因和解决方法（web前端问题）
申明:IE7无法测试,所以下面说的IE6指IE6和IE7 1,遇到的问题 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Styl ...
- inline-block各浏览器兼容以及水平间隙问题解决方案
inline-block属性 This value causes an element to generate a block box, which itself is flowed as a sin ...
- inline-block 引发的间隙原因与解决方法
这是一个常见的问题,但是一些新人没遇到过可能不会发现,现在我对这种现在进行了分析与总结 设置一些元素为块级元素时一般这么写 li{display:inline-block; *display:inli ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- 行内块inline-block元素之间出现空白间隙原因及解决办法
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...
- li:hover在ie6下失效的解决方案
li:hover在ie6下是无效的,它只在ie7以下版本有效.要解决这个问题有两个解决方法.一个是用js来解决,但是这种方法我不喜欢,因为它必需把js代码和css代码都放在html文件中.第二种是在每 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
随机推荐
- gcc命令详解
gcc命令使用GNU推出的基于C/C++的编译器,是开放源代码领域应用最广泛的编译器,具有功能强大,编译代码支持性能优化等特点.目前,GCC可以用来编译C/C++.FORTRAN.JAVA.OBJC. ...
- JAVA WEB项目目录结构以及web应用部署的根目录，编译路径和项目根目录的区别
本文链接:https://blog.csdn.net/l00149133/article/details/78984083 web应用部署的根目录,编译路径和项目的根目录有什么区别? 直接上例子: 你 ...
- Ubuntu 18 Kubernetes集群的安装和部署 以及Helm的安装
首先说一下我的环境, 我是在windows 10 上面建了一个ubuntu18的虚拟机,同时由于某些原因 不受网络限制, 所以安装比较顺利. Install 1.安装并启用 Docker sudo ...
- pytest_全局变量的使用
这里重新阐述下PageObject设计模式: PageObject设计模式是selenium自动化最成熟,最受欢迎的一种模式,这里用pytest同样适用 这里直接提供代码: 全局变量 conftest ...
- Lambda表达式和函数式编程
Lambda表达式和函数式编程 https://www.cnblogs.com/bigbigbigo/p/8422579.html https://www.runoob.com/java/java8- ...
- Echarts 学习系列(1)-5分钟上手ECharts
目录 写在前面 下载Echarts和主题 绘制一个简单的图表 写在前面 最近,在做某个项目的时候.需要使用的可视化的图表显数据.最后,选择了百度的Echarts. 下载Echarts和主题 1.获取E ...
- ajax 执行成功以后返回的数据走的是error方法而不是success方法的问题
今天在一个功能的时候发现写的ajax的方法执行后台代码成功后返回前台时执行的是error方法而不是success方法,代码如下 jQuery('#form').ajaxSubmit({ type: & ...
- C#读写设置修改调整UVC摄像头画面-倾斜
有时,我们需要在C#代码中对摄像头的倾斜进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...
- C# EventHandler观察者模式
C#和java比较: java中使用的是接口.C#使用委托机制,可以用时 + 运算符进行注册,直接多播. 而java中是一般是使用一个集合来保存观察者. 发布者(Publisher)= 被观察者 (O ...
- ASP.NET MVC 允许跨域请求设置
场景:创建一个图片上传的站点,用于其他站点跨域上传附件和图片之类. 上传插件结合百度的 webuploader.js 经常会碰到,跨域的问题,如下, 处理方式呢,是在web.config 中配置允许跨 ...