5

Mac 上の Chrome でこの動作が見られます (Windows ではまだテストしていません)。また、この作業は chrome 拡張機能用であるため、Chrome のみに関連するソリューションを取得しても問題ありません (現時点では、クロスブラウザーで動作する必要はありません)。

問題: ブラウザーは、アウトライン スタイルが「自動」であるかどうかに応じて、要素の周りに異なる方法で「アウトライン」を描画しているようです。

「img」の親であるタグの周りにアウトラインを描画すると、次のようになります。

 <a href="image.com">
   <img class="profile_photo_img" src="imageSrc.jpeg" width="50" alt="Steve Jobs" height="50">
 </a>
  • アウトライン スタイルが "auto" の場合、アウトラインは正しく描画されます。つまり、Chrome は内側の画像の寸法を考慮して、タグの周囲にアウトラインを描画します。(スクリーンショットの緑色のアウトラインを参照)。

ここに画像の説明を入力

  • アウトライン スタイルが「solid」またはその他の通常のスタイルの場合、アウトラインは、内側の子の寸法を無視して、外側のタグの周りにのみ描画されます。

ここに画像の説明を入力

私が適用しているCSSは次のようになります。

.class-name:focus {
   outline: 4px auto #068065 !important;
   outline-offset: 2px !important;
 }

1) これを修正する方法、またはこれを回避する方法はありますか。つまり、ブラウザでアウトライン スタイルの「ソリッド」のアウトラインを正しく描画することはできますか?

2) これについてもっと読むにはどこを見ればよいですか? おそらく、非公式のドキュメントや関連コードへのアクセスですか？

4

1 に答える 1