CSS中的等边框左边和右边高度

Question

如何使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/）

如果使用1px宽度的边框，则底部和右边框将始终在右下角像素中重叠。

---

编辑：作为解决方案，您可以尝试给底部边框宽度为0px，并解决放置按钮的容器中的高度问题。

Answer 2

最简单的解决方案是明确使用：

border-bottom-width: 0;

JS Fiddle demo

Answer 3

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