1、谷歌浏览器显示如下图:
/*按钮*/
.fiveG_btn{
width:300px;
height: 56px;
line-height: 56px;
margin:0 auto;
border-radius: 40px;
margin-top:10px;
overflow: hidden;
box-shadow: 0 5px 5px #fbd3c5;
text-align: center;
&:hover{
box-shadow: 0 5px 5px #e0a58f;
transition: all 0.2s ease-in-out;
}
a{
display: inline-block;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(top, #f77d1a, #ef3612);
background-image: -o-linear-gradient(top, #f77d1a, #ef3612);
background-image: -moz-linear-gradient(top, #f77d1a, #ef3612);
background-image: linear-gradient(top, #f77d1a, #ef3612);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f77d1a', endColorstr='#ef3612', GradientType='0');
color: #fff;
font-size: 20px;
border: none;
outline: none;
cursor: pointer;
text-align: center;
font-weight:bold;
&:hover{
color:#fcfc2d;
transition: all 0.2s ease-in-out;
}
}
}
2、问题:ie7/ie8/ie9是正常的,但ie11不兼容渐变色
3、解决办法:加上如下这句
background: -ms-linear-gradient(top,#f77d1a,#ef3612);