Hello I was making some buttons for a client and he needs IE8 support. The issue I'm facing is that when I click on the button (a tag) it works and the button shows as pushed / active but when I click on the child element (span) it doesn't.
Is this an IE8 issue or am I missing something? and is there any way around this without javascript?
Here is a jsfiddle and the source
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
html,
body {
padding: 100px;
margin: 0;
height: 100%;
font-family: arial;
}
div {
min-height: 80px;
}
/* BUTTONS */
.rebrand-btn {
display: table;
table-layout: fixed;
outline: none;
text-decoration: none;
padding: 17px 38px;
border-bottom: 2px solid #497b0d;
-mox-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #509e2f;
/* Old browsers */
background: -moz-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #97d700), color-stop(100%, #509e2f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* IE10+ */
background: linear-gradient(to right, #97d700 1%, #509e2f 100%);
/* W3C */
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d700', endColorstr='#509e2f', GradientType=1)";
/* IE6-9 */
/*
-webkit-transition: border 100ms linear 0s;
-moz-transition: border 100ms linear 0s;
-o-transition: border 100ms linear 0s;
transition: border 100ms linear 0s;
*/
/* transitions */
}
.rebrand-btn,
.rebrand-btn > * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.rebrand-btn:hover {
background: -moz-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #d2d755), color-stop(100%, #509e2f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* IE10+ */
background: linear-gradient(to right, #d2d755 1%, #509e2f 100%);
/* W3C */
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d755', endColorstr='#509e2f', GradientType=1)";
/* IE6-9 */
}
.rebrand-btn:active {
border-top: 2px solid transparent !important;
border-bottom: 0px !important;
}
/*
.rebrand-btn[disabled=disabled] {
opacity: 0.5;
pointer-events: none !important;
}
*/
.rebrand-btn > span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 16px;
color: #fff;
}
.rebrand-btn.sm {
padding: 12px 19px;
}
.rebrand-btn.sm > span {
font-size: 14px;
}
.rebrand-btn.ico {
padding: 9px 20px;
}
.rebrand-btn.ico > span {
padding-right: 5px;
}
.rebrand-btn.ico > i {
display: table-cell;
width: 32px;
height: 32px;
background: blue;
}
</style>
</head>
<body>
<div>
<a class="rebrand-btn" href="#"><span>This is a test button</span></a>
</div>
<br>
<div>
<a class="rebrand-btn" href="#" disabled="disabled"><span>This is a test button</span></a>
</div>
<br>
<div>
<a class="rebrand-btn ico" href="#"><span>This is a test button</span><i></i></a>
</div>
<br>
<div>
<a class="rebrand-btn sm" href="#"><span>This is a test button</span></a>
</div>
</body>
</html>
In Internet Explorer, the
:activepseudoclass doesn't propagate upward through parent elements. You can see a reduced case here that better illustrates the problem: http://jsfiddle.net/zx7w346u/2/.This issue has been fixed in Microsoft Edge, Internet Explorer's successor.