title: Using :disabled in CSS disabled button style b0rks IE8
body: <p>I have created a custom CSS button class called <code>linkbutton</code>.  It is intended to work on both <code>a</code> and <code>input</code> as sometimes calls to action will be links and other times they will be real submit buttons.  In this case an anchor setup like so doesn't render properly</p>
  
  <pre><code>&lt;a href="" class="linkbutton disabled" id="folderManagementAdd"&gt;
      &lt;i class="icon-plus"&gt;&lt;/i&gt;
      &lt;span&gt;Add Sub Folder&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.linkbutton.disabled, input[disabled=disabled].linkbutton, input:disabled.linkbutton
  {
      color: #ccc;
  }
  
      .linkbutton.disabled:hover, input[disabled=disabled].linkbutton:hover, input:disabled.linkbutton:hover
      {
          color: #ccc;
          box-shadow: none;
          border: 1px solid gainsboro;
          cursor: default;
      }
  </code></pre>
  
  <p>In IE8 this only works when I dont use the <code>input:disabled</code> section at the end (which I need for real browsers).  Is there something I can do to get around this? I really dont want to specify the CSS twice!</p>