1

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>

所以基本上这只是一个divwith 前置divusing before。我想span在 .blue-button 内调整为文本的大小。它在 Chrome 上运行良好，但在 IE/FF 上失败 - 在这些浏览器中，蓝色div位于下一行（它应该与红色 div 位于同一行）。我该如何解决？

4

2 回答 2

3

这是一个问题，因为 IE 无法识别属性

display: inline-block;

IE 资源管理器将内联显示它，为了达到预期的效果，您需要使用“布局”来赋予内容

zoom: 1;

或类似的。

这篇文章对我很有帮助，请查看它以完全理解我要说的内容！

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

于 2012-05-22T14:35:18.387 回答
2

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

content:"\00a0";";

应该

content:"\00a0";

你能确认这只是一个错字，还是它也为你解决了这个问题？

于 2012-05-22T14:35:08.977 回答