如何摆脱这一行？

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会遇到这样的问题，并在元素中增加额外的空间。

您可以尝试使用

底部：-1px;

为.image_text .arrow的类

Answer 2

很难去除它完全考虑到IE渲染平常的旅行，我建议用白色border掩盖它，（bottom: -1px;不会解决这个问题，至少在我结束），可能不是你想要的，但在视觉上做的伎俩：

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

---> External Fiddle <---

预览：