码迷,mamicode.com
首页 > 其他好文 > 详细

li的inline-block出现间隙原因,解决方案

时间:2015-08-18 13:50:42      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:

<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

li的inline-block出现间隙原因,解决方案

标签:

原文地址:http://www.cnblogs.com/871735097-/p/4739031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!