為什么這個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 。 我想將.blue-button內的span調整為文本大小。 它在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";

您可以確認這只是一個錯字，還是可以幫您解決？