0

私のプロジェクトでは、ブートストラップとそれ以下を使用しています。テンプレートをテストするときれいに見えますが、ieTest を使用してテストすると、何か問題があることがわかりました。

写真は、上から順に Chrome 22、IE9、IE6 です。 Chrome22 でテストする IE9でテスト IE6でテスト

「3ピクセルのジョグ」など、見つけられるものはすべて見つけましたが、まだ解決できません。

ここにhtmlコードがあります:

<p class="top-tag">
    <span class="floatbutton">
        <a href="" class="clear left-button">&lt;</a>
        <a href="" class="right-button clear">&gt;</a>
     </span>

    <a href="" class="down">down</a>
    <a href="" class="ask-detail">ask phone</a>
    <a href="" class="bytime">time</a>&nbsp;/&nbsp;
    <a href="" class="passrate">rate</a>
    <b>1,10</b>
</p>

ここにCSSがあります:

p.top-tag {
    margin-top: 25px; 
    font-size: 12px;
    width: 100%;
    a.down, a.ask-detail {
        display: inline-block; 
        height: 25px; 
        text-align: center; 
        line-height: 25px; 
        border: 1px solid #dddddd; 
        color: #2f2725;
    }
    a.down { width: 44px;}
    a.ask-detail {
        width: 90px;
        margin: 0 43px auto 20px;
    }
    b {
        margin-left: 284px;
        display: inline-block;
    }
    span.floatbutton { 
        float: right;
        width: 39px;
        //display: inline-block;
        overflow: auto;
        zoom: 1;

        //for the IE6
        //---
        //_overflow: hidden; zoom: 1; 
        //---
        height: 25px;
        margin: 4px -3px auto 0;
        a {
            display: inline-block; 
            vertical-align: top; 
            width: 13px; 
            height: 13px; 
            border: 1px solid #ddd; 
            padding-left: 4px; 
            padding-bottom: 4px;
        }
        a.left-button {
            float: left; 
            display: inline;  
            border-right-style: none; 
            *margin-top: 1px;
        }
    }
}

テンプレートの先頭でbootstrap.cssandを使用します。css.less

問題は、IE の下のピクセルが機能しない理由です。そしてIE6は表示できず、遠くに浮かんでいます。

ありがとう!

4

0 に答える 0