如何在ie 11中创建css双线？

Question

我想在IE11中创建一条双线，但我遇到了一些麻烦。似乎文本装饰在IE11中是有限的.目前我使用的是一行，但由于我们将使用一些汉字，它可能会被混淆为汉字本身的一部分:双线会更好。

*.strike {
    text-decoration: line-through;
}

我怎样才能做到这一点？

Answer 1

使用定位伪元素。

​

span.double-strike {
  position: relative;
}

span.double-strike:after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  left: 0;
  border-top: 1px solid green;
  border-bottom: 1px solid red;
  width: 100%;
}

<span>
  This is my text with <span class="double-strike">
two lines through it</span> in a paragraph because of crazy weird
<span class="double-strike">requirements</span>
</span>

​

注意:有了这个选项，每一次罢工都可以有一个不同的color...as，这是一个额外的奖励。

Answer 2

IE11本机不支持.

但是有一个潜在的讨厌的选择..。你总能做这样的事..。

在你想要的文本周围设定一个跨度，然后在文本的顶部绝对定位。

在JS Fiddle上找到了一个例子，向你展示了我在说什么。

span.double-strike {
  position: relative;
}

span.double-strike div.the-lines {
   position: absolute;
   top: 10px; /* Depends on the font size */
   left: 0;
   border-top: 3px double black;
   width: 100%;
   height: 100%;
}

https://jsfiddle.net/cmcculloh/Ud5L4/