均等ボーダー左とのborder-right高さ

Question

にはどうすればのborder-rightなどのborder-leftと同じ高さにすることができますか？言い換えれば、国境の順序を変更する方法は？ Border-leftはborder-rightよりも背が高い。 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; 
} 

Answer 1

何が起こっているのですか、CSSが境界線ですばらしい対角線の色を変更しようとしています。 1pxをすべて10pxに変更すると、問題が表示されます。 （画像参照：http://jsfiddle.net/DaTCy/1/）

あなたが国境の1つのピクセル幅を使用している場合は、下と右の境界線は常に右下の画素に重複します。

---

EDIT：ソリューションとして、あなたは下の境界線に0PXの幅を与え、そしてあなたがボタンを入れた容器に高さの問題を解決を試みることができる

Answer 2

使用border-left/-top/-rightと異なるためborder-bottom。 [入れ子]要素。

border-bottom-width: 0; 

JS Fiddle demo：

Answer 3

最も簡単な解決策は、明示的に使用することです。