3px在div的左側或右側的雙邊框，但是在chrome中它會在邊框的頂部留下1px的間隙。我試圖廣泛查看是否這是一個瀏覽器錯誤或某種解決方案。css border-style double 1px gap chrome

如果你在Firefox瀏覽代碼/例如，你得到連續的黑條，鍍鉻和我的手機/平板電腦，我在打破了黑條每個div的頂部得到一個1px的差距

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
.test { 
    height: 100px; 
    width: 100px; 
    border-right: 3px double #c7c7c7; 
    border-left: 3px double #c7c7c7; 
    background-color: #06F; 
    padding: 0px; 
    margin: 0px; 
    border-bottom-style: 
} 
</style> 
</head> 
<body> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
</body> 
</html>

來源

2013-05-15 user2387459

這是不是一個錯誤。這是一個功能:) – maxlego

觀察

有似乎是在離開斜接邊，準備在垂直邊緣會議上邊界，即使沒有一個角落整形算法毛刺。

我懷疑這是預期的行爲，即使spec指出：

本規範沒有定義如何的不同風格的邊界應該在角落裏加入。

你可以看到斜接一個2像素實線邊框加入（截圖）的證據：

enter image description here

如果你看起來非常密切，你可以看到的另一個潛在的問題表現：在頂部和側面邊框的邊緣不碰（截圖）：

enter image description here

解決方法

這是比較複雜/不雅，但解決問題的一種方法是隱藏有問題的元素的頂部和底部邊緣。您需要調整實際網站的尺寸。

例子：http://jsfiddle.net/QSm2Z/10/

.test{ 
    position: relative; 
    height: 100px; 
    width: 152px; 
    overflow: hidden; 
} 

.test:after { 
    width: 100px; 
    height: 102px; 
    content: ""; 
    top: -1px; 
    position: absolute; 
    background-color: #06F; 
    border-left: 26px double #000; 
    border-right: 26px double #000; 
}

來源

2013-05-15 21:54:40

感謝您查看此，我嘗試使用透明邊框和/或零長度的邊框，但沒有運氣得到它來解決問題，謝天謝地只是將我的生產代碼更改爲頂部：-1px;而不是頂部：0;爲我解決了這個問題，因爲我已經使用了：before語句。看起來像另一個瀏覽器錯誤的長列表。你會認爲這樣一個簡單的基本語句就像沒有錯誤！ – user2387459

看起來像一個瀏覽器錯誤 - 它不與普通solid邊界發生 - 看看這個：http://jsfiddle.net/QSm2Z/8/

也許與此相關的錯誤：https://code.google.com/p/chromium/issues/detail?id=61702

個

來源

2013-05-15 21:27:05

css border-style double 1px gap chrome

回答

觀察

解決方法

相關問題