Chrome/WebKit在使用背景，邊框半徑和頂部/底部邊框時創建實心條

Google Chrome正在使用邊框半徑，背景顏色以及頂部和底部邊框來執行更改。這裏的證據和代碼重現：Chrome/WebKit在使用背景，邊框半徑和頂部/底部邊框時創建實心條

<div></div>

div { 
    background:blue; 
    border-top:10px solid red; 
    border-bottom:10px solid red; 
    border-radius:20px 20px 0 0; 
    height:100px; 
    /* 
    border-right:1px solid transparent; 
    */ 
}

的border-right:1px solid transparent;是在意見提出一招這也有助於消除不必要的中間實心棒，但是當你調用調整窗口/瀏覽器 - 它再次出現。它與元素到瀏覽器窗口邊緣的距離有關，我不太明白。您必須調整大小，然後將鼠標懸停在元素上。從我的桌面視頻：

http://www.screenr.com/6wU8（無邊框的右）
http://www.screenr.com/NVU8（有邊框右）

我試過幾個特性-webkit-前綴和無法修理它。

我第一次發佈這是因爲我需要一個特定網站的快速修復，但現在我注意到它出現在幾個網站，我已經確定了導致它的原因。這就是我沒有測試除Firefox之外的任何東西。這可能是一個錯誤，我應該報告它，但同時我仍然需要修復。

理想的解決方案是使用CSS，因此我可以在修補程序的CSS文件中編寫一個或兩個選擇器，而不是通過加載模板文件進行挖掘並在數據庫中進行應用div-wrap或其他標記修復。有沒有人知道擺脫這個錯誤的任何技巧？

來源

2012-03-28 Wesley Murch

我沒有看到每晚的WebKit構建和Safari瀏覽器。 – zneak 2012-03-28 16:58:08

謝謝，那至少縮小了它。在Chrome中查看（我的版本是17，客戶抱怨它，所以他們也看到它，無論他們使用的版本）。如果您的Chrome版本無法重現，則可以在我發佈的視頻中看到它。 – 2012-03-28 16:59:47

似乎你可以通過添加像'border-right：1px solid transparent;'這樣的規則來擺脫它。 – j08691 2012-03-28 17:04:28

在的我尋找到這個問題的時候，仍然有一個問題on the prod website當瀏覽器調整大小以強制水平滾動文檔時可見：

fits horizontally - no defect scrolls horizontally - visible defect

的「解決方案」以前我是既

border-left:1px solid transparent; 
border-right:1px solid transparent;

與開發工具適用於#header - 這似乎生效的問題消失，無論調整，至少在Mac上的Chrome 18

對我來說，這看起來像是越野車行爲 - 我推測它會與混合顏色相交的角落有關，因爲錯誤，最終會滲入到元素本身。

我試圖，而無果而終，看看可能的邊界半徑高於導致此行爲的邊框寬度之間的連接。當然，這是untrue - 玩弄不同的x/y半徑，沒有得到上面應用的「解決方案」，沒有得到任何結果。我很想知道。

來源

2012-04-06 02:11:08

啊我不敢相信我沒有嘗試過！這爲我解決了調整大小的問題。非常感謝，我只是沒有足夠的時間來玩這個令人討厭的小錯誤。這是一個[有點奇怪]（http://jsfiddle.net/6ADtd/11/），邊界超過2px，但完全值得。我有理論認爲它是由邊界/邊界半徑的偶數或奇數像素觸發的，或者使用線性梯度和其他各種各樣的東西，甚至沒有嘗試過這麼簡單的事情。 – 2012-04-06 02:27:14

對不起，我對我的初始答覆有點懶。

約包裹一個div周圍溢出頭隱藏在邊框屬性是什麼：http://jsfiddle.net/jugularkill/Jsdcz/

來源

2012-03-30 13:40:26 Undefined

我認爲你應該閱讀關於CSS中的簡寫符號，你的代碼會將每個角落的半徑放在15px，而我只將它放在左上角和右上角。例如，'3px 2px 1px'將表示左上3px，右上2px，右下1px，左下2px。只需查找邊框的簡寫符號。你的代碼和'15px'一樣。順便說一下，您的演示鏈接與我的問題完全相同。 – 2012-03-30 16:03:29

剛剛更新了我的答案，對此表示遺憾：我在CSS上使用了簡短的手勢，但沒有使用邊界半徑，變換矩陣和其他一些矩陣，儘管我一定會試一試謝謝。 – Undefined 2012-03-30 17:12:16

問題是，我不能通過在外部元素上使用'overflow：hidden'來切斷內部元素背景（帶有漸變的背景）的角落，我有一些位於標題外部的元素，需要可見：http://jsfiddle.net/Jsdcz/1/否則，這是一個公平的解決方法，我很欣賞你的想法。用戶j08691從註釋中解決了主要問題，所以這對我來說在現在的一個星期五是不重要的，特別是如果沒有更好的解決方案出現，我會重新給予您對號。 – 2012-03-30 17:36:49

我從來沒有見過在Chrome這樣的行爲，非常錯誤確實。無論如何，你可以擺脫邊界的底部，它會工作正常。如果可能，只需在底部添加一個背景爲紅色的<div>。事情是這樣的：

http://jsfiddle.net/6ADtd/5/

或者一個CSS唯一的解決方案，你的div後添加內容：

http://jsfiddle.net/Cthulhu/6ADtd/6/

來源

2012-04-05 13:09:40 Cthulhu

添加更多的div並不適合我，因爲修復每個元素的每個出現都是太多工作（如問題中提到的）。刪除底部邊框並用'：after'內容替換並不是一個壞主意，但它也有一些小問題。（另外我應該提到，我不能假設我知道元素的高度 - 我只是爲演示硬編碼）所以，我改變了一下小提琴，我只是試圖讓它表現得更像一個邊界和不像大綱：http://jsfiddle.net/6ADtd/7/今晚將工作 - 感謝這個想法，我認爲這可能是一個竅門。 – 2012-04-05 15:40:54

沒問題，很高興我能幫上忙。其實你的版本效果更好。我很想知道你是如何解決這個問題的。祝你好運！ – Cthulhu 2012-04-05 15:49:56

Chrome/WebKit在使用背景，邊框半徑和頂部/底部邊框時創建實心條

回答

相關問題