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>

つまり、基本的にこれは、を使用divして付加されたものです。.blue-button内でテキストのサイズを変更したい。Chromeでは正常に動作しますが、IE / FFでは失敗します。これらのブラウザーでは、青が次の行にあります（赤のdivと同じ行にある必要があります）。どうすれば修正できますか？divbeforespandiv

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 に答える