爲什麼這個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"; 

你能否證實這只是一個錯字，或者它也爲您解決問題？