0

以下に定義するアンカー リンクの CSS ファイルがあります。これは IE7 では問題なく動作しますが、Firefox でページを開くと、ボタンの画像が長くなります。

Firefox にバックグラウンド ポジションのバグがあるかどうかを Google で調べましたが、何も見つかりませんでした。

この問題を解決するにはどうすればよいですか?

CSSファイルは以下です。

/* button settings */
a.RadForm_CustomSkins, a.RadForm_CustomSkins span
{
    background-image: url('FormDecorator/ButtonSprites.gif');
    background-repeat:no-repeat;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}

a.RadForm_CustomSkins.rfdInputDisabled:hover
{
    background-position: 0% 0%;
}

a.RadForm_CustomSkins .rfdInner,
a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdInner
{
    margin-right: 11px;
    margin-left: 11px;
    background-position: 0 -21px;
    color: #ffffff;
    font-size:11px;
}

a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdOuter
{
    background-position: right 0%;
}

a.RadForm_CustomSkins:hover
{
    background-position: 0 -42px;
}

a.RadForm_CustomSkins:hover .rfdInner
{
    background-position: 0 -63px;
    color: #ffffff;
}

a.RadForm_CustomSkins:hover .rfdOuter
{
    background-position: right -42px;
}
/* end of button settings */

/* clicked button styles */
a.RadForm_CustomSkins.rfdClicked
{
    background-image: url('FormDecorator/ButtonSprites.gif');
    background-position: 0 -84px;
    background-repeat: no-repeat;
}

a.RadForm_CustomSkins.rfdClicked span
{
    background-image: url('FormDecorator/ButtonSprites.gif');
}

a.RadForm_CustomSkins.rfdClicked .rfdInner
{
    background-position: 0 -105px;
    background-repeat: repeat-x;
    color: #ffffff;
}

a.RadForm_CustomSkins.rfdClicked .rfdOuter
{
    background-position: right -84px;
    background-repeat: no-repeat;
}
/* end of clicked button styles */

/* do NOT change these settings, otherwise the skinned buttons will be broken when used within a decoration zone */
a.rfdSkinnedButton.RadForm_CustomSkins
{
    -moz-user-select: none !important;
    outline: none !important;
    text-decoration: none !important;
    cursor: default !important;
    text-align: center !important;
    background-color: transparent !important;
    border: 0 !important;
    display: inline-block !important;
    background-position: 0% 0%; 
}

ボタンとしてレンダリングされた HTML は次のとおりです。

    <a id="_rfdSkinnedctl00_signOut" class="rfdSkinnedButton RadForm_CustomSkins" href="javascript:void(0)" style="width: 80px;">
<span class="rfdOuter">
<span class="rfdInner">Çıkış</span>
</span>
</a>
<input id="ctl00_signOut" class="rfdRealButton" type="submit" value="Çıkış" name="ctl00$signOut" _rfddecoratedid="_rfdSkinnedctl00_signOut"/>
4

1 に答える 1

1

問題を正しく理解していれば、ボタンの幅が IE と Firefox で異なって表示されるということです。あなたが試すことができるいくつかのことはここにあります：

  1. ボタンの幅を明示的に設定します。

  2. max-width を使用して、Firefox のボタンの幅を制限します (DTD で「XHTML 1.0 Strict」を宣言しない限り、IE7 はこのプロパティを認識しません)。

  3. div/tables/その他の要素がボタンのサイズに影響を与えているかどうかを確認してください。

  4. margin/border/padding プロパティが影響しているかどうかを確認してください。

  5. クリーンなページを開始し、問題を最初から作成して、問題を再現できるかどうかを確認します。(上記の例では非常に多くのことが行われており、考えを絞り込む必要があるかもしれません。)

于 2009-07-09T09:25:44.213 に答える