线性梯度或 calc() 在 IE11 中不起作用

Question

我对线性梯度、IE11 和 calc() 函数有疑问。

此代码片段在 Chrome 和 IE11 上的行为不同。

background: linear-gradient(to top right, transparent calc(50% - 1px), #ccc, transparent calc(50% + 1px));

Chrome
IE11

我希望它看起来像 Chrome 版本。
有人有解决办法吗？

Answer 1

我发现了问题。 IE11 不喜欢 calc() 函数。我使用的 calc(50% - 1px) 和 calc(50% + 1px) 绝对值是 div 大小 +-1 的一半。

Answer 2

这是另一种想法，您不需要知道 div 的大小，但不会有透明度：

.box {
  background:
    linear-gradient(to top   right,transparent 49.8%,#fff 50%) top    -1px right -1px,
    linear-gradient(to bottom left,transparent 49.8%,#fff 50%) bottom -1px left  -1px,
    #ccc;
  background-size:100% 100%;
  background-repeat:no-repeat;

/* irrelevant styles */
  width:150px;
  height:150px;
  display:inline-block;
  vertical-align:top;
  border:1px solid;
}

<div class="box">
</div>

<div class="box" style="width:200px">
</div>
<div class="box" style="height:200px">
</div>

与其他想法类似的问题：

线性梯度或 calc() 在 IE11 中不起作用

Linear-gradient or calc() not working in IE11

css

internet-explorer

linear-gradients

css-calc