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:"0a0";";
        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 使用 before 。我希望 span 在. bluue- button 内部重新缩放文本。它对铬很管用, 但在 IE/FF 上却失败了。在那些蓝色 div 浏览器中的下一行是( 它应该与 red 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

我刚刚用你的代码设置了一个拼接器, FF也把红色和蓝色部分放在不同的行。您的 CSS 中有一个错误, 当我修好它的时候, 固定了FF, 并在 IE8 中运行了罚款。你对哪个版本的 IE 有问题吗?

content:"0a0";";

应该是

content:"0a0";

你能确认这只是个打字机还是也帮你修好了?

友情链接