您好我正在为客户端制作一些按钮,他需要IE8支持。我面临的问题是,当我点击按钮(标签)时,它会工作,按钮显示为推/活,但是当我点击子元素(span)时,它不会。
这是IE8问题还是我错过了什么?并且没有javascript可以解决这个问题吗?
这是jsfiddle和来源
<!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>
答案 0 :(得分:0)
在Internet Explorer中,:active
伪类不会通过父元素向上传播。您可以在此处看到一个简化的案例,可以更好地说明问题:http://jsfiddle.net/zx7w346u/2/。
此问题已在Microsoft Edge,Internet Explorer的后续版本中修复。