如何擺脫這一行？

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

預覽：