5

在此处输入图像描述 在此处输入图像描述

如何使左边框与右边框的高度相同？换句话说，如何改变边框的顺序？左边框比右边框高。这会导致 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;
}
4

3 回答 3

4

正在发生的事情是，css 试图在边框中做出漂亮的对角线颜色变化。如果您将所有更改1px为10px，您会看到问题。（图片见：http: //jsfiddle.net/DaTCy/1/）

在此处输入图像描述

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

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

于 2012-05-13T13:37:12.530 回答
2

最简单的解决方案是显式使用：

border-bottom-width: 0;

JS 小提琴演示。

于 2012-05-13T13:45:04.167 回答
0

将border-left/-top/-rightandborder-bottom用于不同的[嵌套] 元素。

于 2012-05-13T13:41:04.780 回答