0

ここに問題があります。html にチェックボックスとハイパーリンクがあります。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    </head>
    <body>                                                              
        <div>
            <input type="checkbox" class="checkbox" id="readAndAgree" name="readAndAgree">
            <div>
                <label for="readAndAgree"> 
                    I have read and agree to the <a href="http://stackoverflow.com/">Credit Profile Authorization</a>. 
                </label>
            </div>
        </div>
    </body>
    </html>

「タブ」を押すと、チェックボックスとハイパーリンクの周りに点線の境界線があることがわかります。

しかし、頭にcssを追加すると、

 <style>
        input{outline-color:green;}
        a{outline-color:green;}
 </style>

チェックボックスの周りの点線の境界線とハイパーリンクはIE 8、9、10で消えます.IE7ではまだ表示されています。

デフォルトのオレンジ色の代わりに「タブ」を押したときに緑色のアウトラインを表示するために、クロムの Outline-color 属性を追加します。

では、これら 2 つのブラウザを互換するにはどうすればよいでしょうか。Chrome では緑色のハイライトが表示され、同時に IE 8、9、10 では、「タブ」を押すと点線のアウトライン/境界線が表示されますか?

ie7はアウトラインをサポートしていないため、ie7では表示されます。ただし、!DOCTYPE 付きの IE8、IE9、IE10 のサポート概要。

4

1 に答える 1

2

CSS：

  input:focus,
  a:focus {
    outline: 1px dotted;
    outline: auto -webkit-focus-ring-color;
    outline-color: green;
  }

タブを押して：すなわち、ff、オペラ：点線の境界線の
クロム、サファリのリングの境界線を表示

http://jsfiddle.net/84bFN/3/

于 2012-11-28T14:40:07.930 に答える