Html 如何摆脱这条线？

我有一个非常具体的问题

#条件

• Internet Explorer | Edge
• 一定尺寸的

图片将对此进行解释：

我在绝对定位的三角形上使用下面提到的CSS来创建箭头效果。图像在三角形中可见，此解决方案是我能找到的唯一响应性解决方案

然而，在IE中，一条底线正在显现？ 这似乎只是在IE中（和往常一样）

我已经创建了一个测试这个问题的工具，但是当您垂直调整HTML所在容器的大小时，这个问题只会显示在小提琴上

箭头的CSS如下所示：

.image_text .arrow {
   position: absolute;
   bottom: 0;
   width: 100%;
   padding-bottom:25px;
   background-color: #ffffff;
}
.image_text .arrow:before, .arrow:after {
  content:"";
  position: absolute;
  bottom: 100%;
  width: 50%;
  padding-bottom:inherit;
  background-color: inherit;
}
.image_text .arrow:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.image_text .arrow:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

---

有没有办法解决这个问题？

我对此不太确定，但IE通常会遇到这样的问题，并在元素中添加额外的空间

你可以尝试使用

底部：-1px

---

对于.image\u text.arrow类

考虑到IE渲染通常的行程，很难将其完全删除，我建议使用白色

边框将其掩蔽，（
底部：-1px；
将无法解决它，至少在我这方面），这可能不是您想要的，但视觉上做到了：


添加
边框：1px纯白至
。图像\文本。箭头



Fx、Chr和Edge给我的结果略有不同。羽毛的顶端（叶子？）和它的右边是不同的+标语和羽毛/叶子顶部之间的距离我真的很喜欢你的想法，但是@Abhishek的那个更有用，因为我不必担心颜色。不过，这仍然是一个很好的解决方案！