带停止的线性渐变在 IE11 中不起作用答案

【问题标题】：Linear gradient with stops does not work in IE11带停止的线性渐变在 IE11 中不起作用
【发布时间】：2018-11-06 15:31:32
【问题描述】：

我尝试在 IE11 中进行此背景工作。我看不出故障……有人知道这是怎么回事吗？

  background: linear-gradient(to right, red 1px, transparent 1px), linear-gradient(to bottom, red 1px, transparent 1px);
  background-size: 60px 30px;

小提琴：https://jsfiddle.net/201gyf6L/

谢谢

–––– 更新––––

我找到了 IE11 的解决方法。

background: linear-gradient(left, red 1px, transparent 1.1px), linear-gradient(top, red 1px, transparent 1.1px);

我将“to right”更新为“left”，将“to bottom”更新为“top”，重要的是，我写了 1.1px 而不是 1px。有点丑，但可以。

【问题讨论】：

How to make background-image with linear-gradient work on IE 11?的可能重复
我建议你使用渐变生成器，你也会得到很多其他浏览器的代码colorzilla.com/gradient-editor
即使不使用 -ms- 前缀 :(

标签： css internet-explorer-11 linear-gradients

【解决方案1】：

尝试使用以下代码：

<head>
    <meta charset="utf-8" />
    <title></title>
   <style type="text/css">
       div {
           width: 420px;
           height: 720px;
           background-color: white;
           background-image: linear-gradient(red 2px, transparent 2px), 
               linear-gradient(90deg, red 2px, transparent 2px), 
               linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), 
               linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
           background-size: 60px 30px;
       }
   </style>
</head>
<body>
    <div>
    </div>
</body>

输出如下（使用IE 11.1.17134.0版本）：

【讨论】：

好吧，这很有趣。我用 2px 试过了，效果很好。但是对于 1px 则不然。可悲的是，我需要 1px。 background: linear-gradient(red 2px, transparent 2px), linear-gradient(90deg, red 2px, transparent 2px); background-size: 60px 30px;