0

ボタンにcssを適用しました。

私が抱えている問題は、css を変更せずにレンダリングが変更されることです。Firefoxでのみ発生します。

これは次のようになります。

ここに画像の説明を入力

私がポストバックするとき時々起こることはここにあります

ここに画像の説明を入力

ご覧のとおり、下に余分な行が追加されています。

CSSは次のとおりです。

.button
{
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box;
}

.button.nav
{
    background:#999;
    background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%, rgba(153,153,153,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(100%,rgba(153,153,153,1)));
    background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    background: linear-gradient(to bottom, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    border:solid 1px #999;
    -moz-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset 0 1px 0 #ddd;
    -webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset 0 1px 0 #ddd;
    box-shadow:0 2px 1px -1px rgba(0,0,0,0.2),inset 0 1px 0 #ddd;
    color:#fff;
    font-size:13px;
    height:26px;
    line-height:26px;
    text-shadow:#999 0 -1px;
}

.button.nav:hover
{
    background:#777;
    background: -moz-linear-gradient(top, rgba(153,153,153,1) 0%, rgba(119,119,119,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,153,153,1)), color-stop(100%,rgba(119,119,119,1)));
    background: -webkit-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    background: -o-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    background: -ms-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    border-color:#777;
    -moz-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset  0 1px 0 #bbb;
    -webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset  0 1px 0 #bbb;
    box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset 0 1px 0 #bbb;
    text-shadow:#777 0 -1px;
}

誰でもアイデアはありますか？

4

2 に答える 2

0

スタイルを適用してみてください button.nav も訪問してアクティブにしました

.button.nav, .button.nav:visited, .button.nav:active{
    /* style */
}
于 2012-10-26T15:19:48.390 に答える
0

答えが出ました。

ここに画像の説明を入力

赤は、高さが設定されていない背景コンテナーです。緑のスパンの行の高さはボタンの高さと同じに設定されていましたが、配置はデフォルトのベースラインに設定されていました。

私は2つのことの1つを行うことができます。1) 行の高さを削除する (IE ではテストされていませんが) または 2) verical-align:middle; を追加します。

アドバイスをくれたみんなに感謝します。

于 2012-10-26T18:07:43.207 に答える