为什么这个HTML/CSS在firefox和ie看起来不一样？

Question

CSS：

* { 
     margin:0; 
     padding:0; 
    } 

    .blue-button 
    { 
     width:auto; 
     display:inline-block; 
    } 

    .blue-button:before 
    { 
     /*background-image:url('blue-button.gif');*/ 
     background:red; 
     width:5px; 
     height:21px; 
     display:block; 
     content:"\00a0";"; 
     float:left; 
    } 

    .blue-button span 
    { 
     background:#00AEEF; 
     display:block; 
     height:100%; 
     text-align:center; 
     margin-left:5px; 

     padding:3px; 
     padding-left:8px; 
     padding-right:8px; 
     color:white; 
    } 

体：

<div class="blue-button"><span>abcdef</span></div> 

所以basicly这只是预谋div一个div使用before。我想要span .blue-button来调整文本大小。它在Chrome上正常工作，但在IE/FF上失败 - 在那些浏览器中，蓝色div位于下一行（它应该与红色div在同一行）。我如何解决它？

Answer 1

这是一个问题，是由于IE是无法识别该属性，

display: inline-block; 

IE浏览器将内联显示它，并实现你需要给内容“布局”使用

预期的效果

zoom: 1; 

或类似的。

这篇文章对我很有帮助，查看完整了解我想说的话！

http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html

Answer 2

我只是用你的代码设置了一个jsfiddle，而FF也将红色和蓝色部分放在了不同的行上。在你的CSS中有一个错误，当我修复它时，修复了FF，并且在IE8中运行良好。您遇到哪种版本的IE？

content:"\00a0";"; 

应该

content:"\00a0"; 

你能否证实这只是一个错字，或者它也为您解决问题？