如何在IE11浏览器中实现CSS双删除线效果？

我完全懂你的困扰——IE11对CSS的支持确实有点让人头疼，尤其是text-decoration: line-through double这种语法它根本不兼容。不过别担心，咱们可以用两种方法来模拟双删除线效果，完美适配IE11，还能避免和汉字混淆。

方法一：伪元素模拟（推荐单行文本） #

这个方法利用原生删除线+伪元素来实现两条平行的删除线，逻辑简单且兼容性好：

/* 基础样式：第一条删除线 + 相对定位 */
.strike {
  position: relative;
  text-decoration: line-through;
  display: inline-block; /* 确保伪元素能覆盖整个文本宽度，行内元素必加 */
}

/* 伪元素实现第二条删除线 */
.strike:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 1px solid currentColor; /* 继承文字颜色，保持风格统一 */
  transform: translateY(-50%); /* 精确垂直居中 */
}

微调技巧 #

如果觉得两条线间距不合适，可以修改top的值（比如top: 45%或top: 55%），根据你的字体大小和需求调整，直到视觉效果满意为止。

方法二：背景渐变模拟（支持多行文本） #

如果你的文本是多行的，伪元素方法可能会失效，这时可以用线性渐变来模拟双删除线：

.strike {
  background-image: 
    linear-gradient(to bottom, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
    linear-gradient(to bottom, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
  background-size: 100% 1.6em; /* 第二个值控制两条线的垂直间距，按需调整 */
  background-position: 0 0.3em, 0 0.9em; /* 分别控制两条线的垂直位置 */
  background-repeat: repeat-y;
  text-decoration: none; /* 去掉原生删除线，用渐变模拟 */
}

这个方法在IE11中也能正常工作，不过需要根据你的字体大小仔细调整background-size和background-position的参数，确保两条线对齐美观。

内容的提问来源于stack exchange，提问作者devamat