邊緣瀏覽器中出現意外的1像素邊距

我在居住在固定容器中的div下有意想不到的1px邊距。這個問題只發生在邊緣（可能在IE中）。經過一些測試後，我可以用一個簡單的骨頭例子重現這個錯誤。邊緣瀏覽器中出現意外的1像素邊距

這張圖片，您可以重現運行下面的代碼片段，由固定格內的3個方形div組成。火狐

在邊緣，您可以通過禁用容器DIV財產top: 50%，或在裏面的div禁用border-*-right-radius: 6px「解決」這個問題。當然，這不是一個修復，因爲我需要這些屬性來有效地實現這個設計。

我該如何解決這個問題？我嘗試添加與背景顏色相同的邊框，但背景不是不透明的。

編輯：如果您在IE/Edge中無法立即看到它，請嘗試選擇容器div並緩慢增加top屬性的值。在IE11中，將其從5％改爲6％已經使問題再次顯而易見。

.box { 
 
    background-color: rgba(0,0,0,0.15); 
 
    height: 70px; 
 
    line-height: 70px; 
 
    text-align: center; 
 
    border-right: 1px solid rgba(0,0,0,0.2); 
 
} 
 
.box:hover { 
 
    background-color: rgba(50,50,100,0.15); 
 
} 
 
.box:first-child { 
 
    border-top-right-radius: 6px; 
 
    border-top: 1px solid rgba(0,0,0,0.2); 
 
} 
 
.box:last-child { 
 
    border-bottom-right-radius: 6px; 
 
    border-bottom:1px solid rgba(0,0,0,0.2); 
 
} 
 

 
.main { 
 
    width: 70px; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 5%; 
 
}

<div class="main"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

來源

2015-09-15 ecc

IE11中不可重現;看起來像是Edge。 – TylerH

不在FF中複製。但是，您可以使用.box之前或之後的元素：在{}之後，並將絕對東西放在該容器的頂部。 – RooWM

感謝您的測試，但我只是自己測試了一下，IE瀏覽器也一樣，但稍微不太明顯。檢查我的更新。 – ecc

嘗試使用接壤父格：對父http://jsfiddle.net/gtf0fa8n/1/

邊境半徑不剎內的div渲染IE

.main { 
    border: 1px solid rgba(0, 0, 0, 0.5); 
    border-left: 0; 
    border-radius: 0 6px 6px 0; 
    overflow: hidden; 
} 

.box { 
    background-color: rgba(0, 0, 0, 0.3); 
    height: 70px; 
    line-height: 70px; 
    text-align: center; 
} 
.box:hover { 
    background-color: rgba(50,50,100,0.15); 
}

來源

2015-09-15 15:06:14 IonDen

你可以把代碼內聯而不是小提琴嗎？更好的網站 – ecc

然後看看懸停效果如何打破它！我認爲真正的解決方案是等待Edge的更新版本...大約5年 – musefan

@ecc它是內聯的。 – IonDen

只要給boxshadow 1px的的底部顏色相同。

box-shadow: #2a2e37 0px 1px 0px;

來源

2016-03-24 07:30:32 Ammar

邊緣瀏覽器中出現意外的1像素邊距

回答

相關問題