12

CSS アウトライン プロパティが Firefox 7 以下でレンダリングされる方法に少し困惑しています。明らかにどこかに問題があるのですが、見つけられません。

他のすべての主要なブラウザー (Opera、Chrome、IE、Safari) では問題なく動作します。

参照用にいくつかのスクリーンショットを追加しました。Firefox からの 1 つ:

ここに画像の説明を入力

もう1つはChromeから：

ここに画像の説明を入力

CSSは次のとおりです。

form#commentform input:focus { outline: 2px outset #717377 }

XHTML は次のとおりです。

<form id="commentform">
      <div>
         <label for="name">
            <strong>
            Nom
            <span id="sname"></span>
            </strong>
         </label>
         <input type="text" tabindex="1" id="name" name="name" class="textbox" />
      </div>
...
</form>

どうすればこれを解決できますか?

4

2 に答える 2

11

Firefox では、アウトラインはbox-shadow(内部ではなく) の周りに描画されます。
そのため、(CSS ハックを使用して) 追加のルールoutline-offset: -X(X = 影の長さ) を提供する必要があります。

于 2011-10-20T10:08:56.760 に答える
3

このバグは Firefox 30 で修正されます: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109。

それまでは、複数の box-shadow を使用できるため、要素に別の box-shadow を適用できます。

.element {
    box-shadow: your values old box-shadow, 0 0 0 2px #717377;
}
于 2014-05-16T13:47:59.567 に答える