[英]IE Gradient and border Radius issue
I am creating a button with both border radius and gradient.我正在创建一个带有边框半径和渐变的按钮。
If you check in IE browser on the right side a background color is taking.如果您在右侧的 IE 浏览器中查看背景颜色。
I am trying to resolve this issue but I am unable to do it.我正在尝试解决这个问题,但我无法做到。 All the browsers are working fine, only IE is facing this issue
所有浏览器都工作正常,只有 IE 面临这个问题
HTML: HTML:
<span aria-disabled="false" id="__button2-0" class="sapUiSegmentedButton" role="radiogroup" tabIndex="0" data-sap-ui="__button2-0">
<button aria-haspopup="true" aria-disabled="false" id="__button3-0" class="sapCPDownloadBtn sapCPCartBtn sapUiBtn sapUiBtnNoGradient sapUiBtnNorm sapUiBtnS sapUiBtnStd sapUiMenuButton" role="button" tabIndex="-1" type="button" data-sap-ui="__button3-0">
<span class="sapUiBtnTxt">Download</span>
<span class="sapUiMenuButtonIco"></span>
</button>
</span>
CSS: CSS:
.sapCPCartBtn {
width: 205px;
/* fallback */
padding: 10px;
text-align: center;
height: 32px;
box-shadow: none;
color: #FFFFFF !important;
font-weight: bold;
font-size: 1em !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
-khtml-border-radius: 10px !important;
-goog-ms-border-radius: 10px!important;
margin-top: 5px;
text-align: center;
display: inline-block;
cursor: pointer !important;
border: 0px!important;
background-color: #ff0000;
background: -o-linear-gradient(top, #333399, #000066);
background: -moz-linear-gradient(top, #333399, #000066);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));
}
.sapCPCartBtn {
background: none\9;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001E5799', endColorstr='#bb7db9e8', GradientType=1 )\9;
/* ie */
box-shadow: none\9 !important;
background-position: 1px 1px \9;
}
Try this and one more thing when you are using filter and border radius in a same class in IE rounded corners will not work... try the below css...当您在 IE 圆角中的同一类中使用过滤器和边框半径时,请尝试此操作和另一件事...尝试以下 css...
.sapCPCartBtn {width: 205px;padding: 10px;text-align: center;height: 32px; .sapCPCartBtn {width: 205px;padding: 10px;text-align: center;height: 32px; box-shadow: none;color: #FFFFFF !important;
框阴影:无;颜色:#FFFFFF !重要; font-weight: bold;font-size: 1em !important;-moz-border-radius: 10px !important;-webkit-border-radius: 10px !important;
字体粗细:粗体;字体大小:1em !important;-moz-border-radius: 10px !important;-webkit-border-radius: 10px !important; border-radius: 10px !important;-khtml-border-radius: 10px !important;-goog-ms-border-radius: 10px !important;margin-top: 5px;text-align: center;display: inline-block;cursor: pointer!important;border: 0px !important;background-color: #ff0000;background: -o-linear-gradient(top, #333399, #000066);background: -moz-linear-gradient(top, #333399, #000066);background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333399', endColorstr='#000066', GradientType=0 );
边框半径:10 像素!光标:指针!重要;边界:0px !重要;背景颜色:#ff0000;背景:-o-线性渐变(顶部,#333399,#000066);背景:-moz-线性渐变(顶部,#333399 , #000066);背景:-webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#333399', endColorstr='#000066', GradientType=0 ); /* ie */}
/* IE */}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.