with an inner not triggering :active state in IE 8

by

Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.

Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.

More Related Contents:

  1. How does one target IE7 and IE8 with valid CSS?
  2. Does IE 8 have a limit on number of stylesheets per page?
  3. CSS rounded corners in IE8
  4. Text in a flex container doesn’t wrap in IE11
  5. Opacity CSS not working in IE8
  6. Internet Explorer’s CSS rules limits
  7. CSS background opacity with rgba not working in IE 8
  8. @font-face EOT not loading over HTTPS
  9. IE display: table-cell child ignores height: 100%
  10. IE8 :nth-child and :before
  11. IE 6 & IE 7 Z-Index Problem
  12. Opacity of div’s background without affecting contained element in IE 8?
  13. @font-face works in IE8 but not IE9
  14. Background-image in keyframe does not display in Firefox or Internet Explorer
  15. Internet Explorer z-index bug?
  16. z-index does not work in Internet Explorer with pdf in iframe
  17. CSS Selector for
  18. Any way to remove IEs black border around submit button in active forms?
  19. Flex auto margin not working in IE10/11
  20. element not working in Internet Explorer 11
  21. IE7, IE8 support for css3 media query [duplicate]
  22. Detecting IE version using CSS Capability/Feature Detection
  23. IE and Edge fix for object-fit: cover;
  24. How does ?#iefix solve web fonts loading in IE6-IE8?
  25. How to make Google Fonts work in IE?
  26. Does Internet Explorer support CSS transitions?
  27. word-wrap:break-word not working in IE8
  28. Will targeting IE8 with conditional comments work?
  29. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera
  30. how to make sure select option text align in the center in IE?

Leave a Comment