Q

平等左邊框和右邊框的高度在CSS

css
border

2012-05-13 112 views 5 likes

5

enter image description here 平等左邊框和右邊框的高度在CSS

我怎樣才能讓左邊框相同的高度，右邊框？換句話說，如何改變邊界的順序？邊界左邊比邊界右邊高。這導致了1px的「差距」。

.tab-header > ul > li 
{ 
display: inline-block; 
background-color: #ffffff; 
border-bottom: 1px solid #ffffff; 
border-left: 1px solid #cecece; 
border-right: 1px solid #cecece; 
border-top: 1px solid #cecece; 
padding: 8px; 
font-size: 10px; 
text-transform: uppercase; 
}

2012-05-13 Falko Joseph

A

回答

4

發生了什麼，是CSS試圖在邊界上做出一個很好的對角線顏色變化。如果將所有1px更改爲10px，則會看到問題。（圖片，請參閱：http://jsfiddle.net/DaTCy/1/）

enter image description here

如果您使用的是邊框，底部和右側邊框將總是在右下像素重疊的1px的寬度。

編輯：作爲一個解決方案，你可以嘗試給底邊框0像素的寬度，而在你把按鈕容器解決身高問題

2012-05-13 13:37:12 Hidde

+0

你說得對。但是，你有任何解決方案/替代方案嗎？我不想使用2px。 –

+0

謝謝大家，它的竅門http://i.imgur.com/VuSdf.png –

0

使用border-left/-top/-right和border-bottom爲不同。 [嵌套]元素。

2012-05-13 13:41:04

2

最簡單的解決方案是明確使用：

border-bottom-width: 0;

JS Fiddle demo。

2012-05-13 13:45:04

相關問題