title: outline attribute conflict for IE and chrome
body: <p>I have a problem here, I have a checkbox and a hyperlink in the html:</p>
  
  <pre><code>  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;                                                              
          &lt;div&gt;
              &lt;input type="checkbox" class="checkbox" id="readAndAgree" name="readAndAgree"&gt;
              &lt;div&gt;
                  &lt;label for="readAndAgree"&gt; 
                      I have read and agree to the &lt;a href="http://stackoverflow.com/"&gt;Credit Profile Authorization&lt;/a&gt;. 
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>When press "tab" you can see there's dotted border around checkbox and hyperlink. </p>
  
  <p>But if add the css in the head,</p>
  
  <pre><code> &lt;style&gt;
          input{outline-color:green;}
          a{outline-color:green;}
   &lt;/style&gt;
  </code></pre>
  
  <p>the dotted border around the checkbox and the the hyperlink disappear in IE 8, 9 10.  IE7 still showing it.</p>
  
  <p>I add the outline-color attribute for chrome to show the green outline when press "tab" instead of default orange color.</p>
  
  <hr>
  
  <p>So how to compatible these two browsers? In chrome, it will show the green highlight, and at the same time, in IE 8, 9, 10, it will show the dotted outline/border when press "tab"?</p>
  
  <p>In ie7 it will show because ie7 doesn't support outline. but IE8 with !DOCTYPE, IE9, IE10 support outline.</p>