float和inline-block的一些小细节问题

<style> 
div{width:400px;} a{width:200px;padding:0px;margin:0px;border:none;display:inline-block} 
</style>
<div>
<a href='#'>one</a>
<a href='#'>two</a>
</div>

 

大家看个例子

简单的写一下

现在不知道为什么出现不了代码编辑器

只能写写文本了。

 

我们会看到这么写的话两个A是不能处于同一行的。

换一种style的写法

<style> 
div{width:400px;} a{width:200px;padding:0px;margin:0px;border:none;display:block;float:left;} 
</style> 

 

 

这样能够在同一行

我搜索问题原因，在一篇英文文章里面说是因为inline元素都会跟inline元素之间产生一个类似white-space的空隙

 

可以验证，通过设置a的不同背景色，然后加大div的宽度 当他们正好到同一行的时候，确实看到两个A之间有个空隙。

 

虽然这种说法我也赞同

 

但是我发现其中有一些我现在都无法解释的问题，如果有人知道可以告诉我一下。

 

就是在chrome中文版里面这个空隙将近是8px

而在chrome英文版里面却只是4px

这一点让我感觉太诡异了

然而还有一种使用inline-block但是不会出现空隙的做法

就是将html代码写成这样

 

<div>
<a href='#'>one</a><a href='#'>two</a>
</div>

 

就是将两个A写在同一行，挨着写

难道说我们平时写的换行的写法就会引起一些浏览器的兼容问题？

还是说同一行的写法尽量使用float而不是inline-block？

这一点真的很希望有人能帮我详细解释一下，万分感谢