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

Question

我想在 IE11 中创建双直通，但我遇到了一些麻烦。似乎 text-decoration 在 IE11 中受到限制。目前我使用单行，但由于我们将使用一些汉字，它可能会被混淆为汉字本身的一部分：双行会更好。

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

如何实现？

Answer 1

IE11 本身不支持这个...

然而，有一个潜在的 hacky 选项......你总是可以做这样的事情......

围绕您希望应用双删除线的文本设置跨度，然后将删除线绝对定位在文本顶部。

在 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/

Answer 2

使用定位 pseudo-element

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>

请注意，使用此选项时，每次罢工都可以有不同的颜色...作为额外的奖金。

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

how can I create a css double line-through in ie 11?

html

css

internet-explorer-11