title: Link border changing color on ios
body: <p>I have a div nested within an anchor, to make the entire div clickable. This works fine on a desktop and also on an iPhone, the issue is when I click on it.
  It must be something to do with the :visited tag, but my css does not include anything like that, and it only happens on the iphone.</p>
  
  <p>Here are some screenshots of the link before and after I click on it.</p>
  
  <p><a href="http://img.joshblease.co.uk/BeforeClick.jpg" rel="nofollow"><strong>Before Click</strong></a>    <a href="http://img.joshblease.co.uk/AfterClick.jpg" rel="nofollow"><strong>After Click</strong></a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.Widget{
  padding: 0 0 10px 0;
  }
  .Widget span.Title{
  padding: 10px;
  padding-right: 30px;
  display: block;
  background: rgba(255, 203, 110, 0.6);
  font-size: 22px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  }
  .Widget span.Content{
  display: block;
  padding: 5px;
  border: 2px solid rgba(255, 203, 110, 0.6);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  }
  .EnquiryLink{
  color: #000000;
  text-decoration: none;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href="/Contact/" class="EnquiryLink"&gt;
      &lt;div class="Widget EnquireWidget"&gt;
          &lt;span class="Title"&gt;Enquire:&lt;/span&gt;
          &lt;span class="Content"&gt;Make an enquiry here with our contact form.&lt;/span&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I believe it to be changing the border colour of span.Content, but I don't know why. The only :hover classes within my code are specific to there relevant elements.</p>