标签:style blog http color ar 使用 strong sp div
平时制作页面的时候经常会用到inline-block属性的元素,而他们是有默认间距的。
今天制作移动端的时候又遇到这个问题,所以仅此记录一下
解决方法有:
第一种方法:加上 font-size:0; 和 font-size:12px; 不兼容safari浏览器,用行内元素李欢li,ie6下面中间有右间距1像素。
ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;font-size:0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;font-size:12px;}
第二种方法:改变html结构,都兼容
<ul class="test1">
<li>
关于我们</li><li>
客户服务</li><li>
招聘信息</li><li>
隐私声明
</li>
</ul>
或者
<ul class="test1">
<li>关于我们</li
><li>客户服务</li
><li>招聘信息</li
><li>隐私声明</li>
</ul>
第三种,父元素中设置font-size:0,用来兼容chrome,firefox等浏览器,而使用letter-space:-N px来兼容safari:都兼容
ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;letter-spacing: normal;word-spacing:normal;font-size:12px;}
标签:style blog http color ar 使用 strong sp div
原文地址:http://www.cnblogs.com/leoy/p/4039796.html