为什么这个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";

您可以确认这只是一个错字，还是可以帮您解决？