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>

所以基本上这只是一个使用div前置div的{{1}}。我想在.blue-button内部before调整文本大小。它在Chrome上工作正常但在IE / FF上失败 - 在那些浏览器中，蓝色span位于下一行（它应该与红色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";

你能否证实这只是一个错字，还是为你修好了？

为什么这个html / css在firefox中看起来不同呢？

2 个答案: