inline-block间隙的问题和其涉及到的问题


基本了解:

1.inline-block(行内块元素),是inline和block的混合体是在css2.1中新增的。行内块元素(替换元素)在行框内被视为行内元素,因此根据 CSS 的空白符处理规则,
行内元素之间的空白符(空格、回车、Tab 键)应被合并为一个空格,可以理解为个缝隙实际上就是行内元素之间的空格,类似于单词之间的空格,
所以它的宽度是与字体相关的。所以字体越大缝隙越大。
2.我记得ie6.7中很多属性都是遵循的css2.0设置很早的以前的规范,而display:inline-block是css2.1新增的。所以没有这个属性,
但是ie6.7可以模拟:
>1.模拟对象对块级元素,在模拟为行内块元素之后,IE6,7 其实还是以块元素的空白符处理规则来处理它们之间的空白符,即忽略;
>2.模拟对象为行内元素,在模拟为行内块元素之后,IE6,7 就以行内元素的空白符处理规则来处理它们之间的空白符,
即合并为一个空格,与CSS 的空白符处理规则恰好一致,这就是很多人在说,ie6.7下只有内联元素才支持display:inline-block.
这只是模拟的表象,本质上应该是不支持inline-block这个属性(具体数据我也没查过,如有错误,后果自负),只是不支持,并不能说是ie6,7的bug问题
3.inline-block更多的情况下是为了触发ie的特有属性haslayout,和影响布局的计算值。
4.css渲染方式是左右到左地,如果不知道情况,你调了个属性的位置,出了问题,都不知道问题在哪地!
<!DOCTYPE html>
<html>
	<head>
  	<title> inline-block </title>
	<meta charset="utf-8" />
  	<meta name="keywords" content="" />
  	<meta name="description" content="" />
    <style>
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,a{margin:0;padding:0;border:0 none;outline:0 none;}
    body{font:12px/1.5 Arial,sans-serif,"宋体";}
    .footerNav a{display:inline-block;background:#ff8000;width:100px;height:50px;margin-right:-0.5em;}
    .nav li{display:inline-block;*display:inline;*zoom:1;width:100px;height:50px;background:#65ca00;margin-right:-0.5em;*margin-right:0;}
    </style>
	</head>
	<body>
	    <div class="footerNav">
	        <a href="">关于我们</a>
            <a href="">关于我们</a>
            <a href="">关于我们</a>
            <a href="">关于我们</a>
            <a href="">关于我们</a>
            <a href="">关于我们</a>
	    </div>
        
        <ul class="nav">
            <li><a href="">行业新闻</a></li>
            <li><a href="">企业动态</a></li>
            <li><a href="">行业新闻</a></li>
            <li><a href="">企业动态</a></li>
            <li><a href="">行业新闻</a></li>
            <li><a href="">企业动态</a></li>
        </ul>
	</body>
</html>

解决方式:
1.所以只要设置为margin-right:-0.5em;就可以了,em是相对单位,是根据你当前容器的的字体大小来计算的,如果是12px, 0.5em = 6px 14px 0.5em =7px.
为了方便直接0.5em就可以了,不必要用px太设定了。

2.这个空白符其实只要不换行就不会产生,但为了代码可阅读性,谁会愿意把很多标签写在同一行。就为解决这个问题?(最快的,最省事的解决方式)
3.也可以利用letter-spacing和word-spacing属性,来解决这个问题。
4.也可以用font-size:0的方式来解决。
以上方式3.4没测过,我不是搞academic,因为1 的方式最快solution,3.4只是为以后闲的时候留个脚印,继续测。

PS:以上问题的描述性,有待考证。以上只作为个人笔记~只是个人理解和部分内容css权威指南上所说,IE6,7到底支不支持inline-block,还要细挖资料。

所以有问题,或者谁更了解,希望留言讨论,但不是很深很深的讨论,太费时间!

优质内容筛选与推荐>>
1、linux基础-day01
2、说说最近
3、HttpRequest模拟Post和Get提交代码
4、记录一道神仙CTF-wtf.sh-150
5、Linux下常用压缩 解压命令和压缩比率对比


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号