html - 当 css 翻转时，Css Gradient 在 Internet Explorer 中不起作用

Question

我有一个适用于所有浏览器的渐变 CSS 代码

header{
padding:0px 0;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+13,3e6d9f+40 */
   background: rgb(255,255,255); /* Old browsers */
   background: -moz-linear-gradient(left,  rgba(255,255,255,1) 13%,rgba(0,119,159,0.5) 40%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(13%,rgba(255,255,255,1)), color-stop(40%,rgba(62,109,159,0.5))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 13%,rgba(62,109,159,0.5) 40%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left,  rgba(255,255,255,1) 13%,rgba(62,109,159,0.5) 40%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  rgba(255,255,255,1) 13%,rgba(62,109,159,0.5) 40%); /* IE10+ */
   background: linear-gradient(to right,  rgba(255,255,255,1) 13%,rgba(62,109,159,0.5) 40%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e6d9f',GradientType=1 ); /* IE6-9 */
   position:relative;
   z-index:1;
}

图像看起来像这样

然后我必须将这个 css 翻转为阿拉伯语版本和类似的代码

header{
padding:0px 0;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+13,3e6d9f+40 */
   background: rgb(255,255,255); /* Old browsers */
   background: -moz-linear-gradient(right,  rgba(255,255,255,1) 87%, rgba(0,119,159,0.5) 40%) !important; /* FF3.6+ */
   background: -webkit-gradient(linear, right top, left top, color-stop(13%,rgba(255,255,255,1)), color-stop(40%,rgba(62,109,159,0.5))) !important; /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(right,  rgba(255,255,255,1) 87%,rgba(62,109,159,0.5) 40%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(right,  rgba(255,255,255,1) 87%,rgba(62,109,159,0.5) 40%); /* Opera 11.10+ */
   background: -ms-linear-gradient(right,  rgba(255,255,255,1) 87%,rgba(62,109,159,0.5) 40%); /* IE10+ */
   background: linear-gradient(to left,  rgba(255,255,255,1) 87%,rgba(62,109,159,0.5) 40%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e6d9f',GradientType=1 ); /* IE6-9 */
   position:relative;
   z-index:1;
}

此代码适用于除 Internet Explorer 之外的所有浏览器

所有浏览器中的图像都像翻转一样

但 Internet Explorer 显示错误，请参阅下面的附件

请帮助我以前遇到过这个问题的人，有什么解决办法吗？必须赞赏好的答案

Answer 1

我得到的答案是 -ms-linear-gradient 和 linear-gradient 从右到左排列将 % 减少到 13

header{
   padding:0px 0;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+13,3e6d9f+40 */
   background: rgb(255,255,255); /* Old browsers */
   background: -moz-linear-gradient(right,  rgba(255,255,255,1) 87%, rgba(0,119,159,0.5) 40%) !important; /* FF3.6+ */
   background: -webkit-gradient(linear, right top, left top, color-stop(13%,rgba(255,255,255,1)), color-stop(40%,rgba(62,109,159,0.5))) !important; /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(right,  rgba(255,255,255,1) 87%,rgba(62,109,159,0.5) 40%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(right,  rgba(255,255,255,1) 87%,rgba(62,109,159,0.5) 40%); /* Opera 11.10+ */
   background: -ms-linear-gradient(right,  rgba(255,255,255,1) 13%,rgba(62,109,159,0.5) 40%); /* IE10+ */
   background: linear-gradient(to left,  rgba(255,255,255,1) 13%,rgba(62,109,159,0.5) 40%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e6d9f',GradientType=1 ); /* IE6-9 */
   position:relative;
   z-index:1;
}