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 仍然显示它。

我为 chrome 添加了 outline-color 属性，以在按“tab”而不是默认的橙色时显示绿色轮廓。

那么如何兼容这两种浏览器呢？在chrome中，它会显示绿色突出显示，同时在IE 8、9、10中，按下“tab”时会显示虚线轮廓/边框？

在 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;
  }

按 T​​ab 和：ie、ff、opera：显示虚线边框
chrome、safari 环形边框

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

于 2012-11-28T14:40:07.930 回答