Firefox輪廓渲染錯誤

在我正在構建的網站上，我正在爲身體使用邊框輪廓框陰影。Firefox輪廓渲染錯誤

看到這裏jsFiddle

border: 9px solid #0C144E; 
outline: 9px solid #fff; 
box-shadow: 0 0 0px 18px #CC092F;

我的問題是Firefox的呈現輪廓不同。

我可以通過應用避開它：

outline-offset: -18px;

雖然它修復Firefox的，這意味着它不會在Chrome，Safari瀏覽器中正確顯示，是沒有將其應用到Firefox只有我試過的方式添加-moz-無濟於事。或者以其他方式繞過它。

來源

2013-08-22 Steven_Harris_

的雙邊框效果你想實現的外觀*非常*類似一個從問題我回答過幾天前 - 見http://stackoverflow.com/questions/18219056/multiple-borders-around-a-div-with-a-transparent-layer/18219591#18219591。我使用CSS'：before'來創建雙邊效果。這是我爲該答案創建的小提琴：http://jsfiddle.net/k8v7D/ – Spudley

感謝您的建議！ –

如果這種技術適合你，那麼我建議使用它來支持使用瀏覽器黑客按照你接受的答案;瀏覽器黑客應該永遠是最後的手段（因爲如果它是一個FF錯誤，如果Mozilla修復了下一個版本中的錯誤會發生什麼？） – Spudley

您可以使用該技術表現出在這裏：CSS Hacks Targeting Firefox

@-moz-document url-prefix() { 
    body { 
    outline-offset: -18px; 
    } 
}

jsFiddle Demo

來源

2013-08-22 15:41:02 Itay

謝謝你的破解！ –

Firefox輪廓渲染錯誤

回答

相關問題