2017-10-15 73 views
0

我發展我的網站一個簡單的不透明度滑塊和我遇到一個奇怪的渲染錯誤(?)低於不透明度過渡(Chrome和Opera處理它完美)。在Firefox中渲染錯誤?出現這種情況只有在Firefox中的文本元素

的問題是當幻燈片改變對方,還有在出現這些水平線:Screenshot with horizontal line

顯然,它有事情做與切換圖像箭頭。如果我爲其設置了display: none,則不會顯示任何行。

箭頭在跨度簡單><,他們有文字陰影。如果我從他們除去文字陰影,行變薄:Screenshot with thinner horizontal line

跨度用箭頭被定位絕對內部的div其中每個滑動容器的取一半。這些div位於其他div內,它是幻燈片的兄弟,並有z-index:1在他們之上。如果我爲跨度設置右/左位置,以便它們只是一個重疊的圖像,或者如果爲了同一目的而使div更薄(例如,40%而不是50%),則線消失:Screenshot with no line

It可能看起來像跨度的寬度,但設置最大寬度和顯示:塊也沒有幫助。

我怎樣才能擺脫這個奇怪的線?也許有CSS的黑客呢?你可以自己檢查滑塊here。謝謝!

+0

文件的script.js嘗試禁用和測試,看看是不是誰跟你互動滑塊的文件。並看到你的innerhtml。 – 2017-10-15 15:48:47

回答

0

所以我刪除跨度,而是把箭頭只是內部的div。我使用的是垂直居中的:在從this answer CSS入侵之前。沒有古怪的線條和作品像魅力,雖然我不得不在箭頭前後添加一些nbsp,所以他們不會只是在幻燈片容器的邊緣。好吧,有點髒,但現在很好。即使在IE10中工作,我不需要更多。