Question

我在这里遇到问题，我在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不支持轮廓。但IE8与！DOCTYPE，IE9，IE10支持大纲。

Answer 1

CSS：

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

按Tab键并：即，ff，opera：显示虚线边框
铬，野生动物园边界

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

IE和Chrome的大纲属性冲突

1 个答案: