如何摆脱这条线？

Question

我有一个非常具体的问题。

＃条件

• Internet Explorer |边缘
• 一定规模

图像会解释它：

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

然而，在IE中，显示了底线？ 这似乎只在IE中（像往常一样）

我已经创建了一个fiddle来测试这个问题，但是当你垂直调整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);
}

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

Answer 1

我对此不太确定，但通常IE在这些问题上存在一些问题，并在元素中增加了额外的空间。

您可以尝试使用

  

bottom：-1px;

表示 .image_text .arrow 类

Answer 2

为了完全删除它，考虑到IE呈现通常的行程，我建议用白色border屏蔽它，（bottom: -1px;不会解决它，至少在我的结束时），可能不是你想要什么，但在视觉上可以做到这一点：

• 将border: 1px solid white;添加到.image_text .arrow

<强> ---> External Fiddle <---

预览：