css - 与外边框相比，内边框更厚

Question

http://jsfiddle.net/MzqYL/3/

在上面的示例中，框架的边框比内部边框薄。

我该如何解决这个差异？

图片：http: //i.stack.imgur.com/FEtio.png

Answer 1

有如何：http: //jsfiddle.net/MzqYL/9/

基本思想是为内部元素定义两侧的边框，并为主包装元素添加缺失的边框。

Answer 2

问题是您正在堆叠边框，因此上方框的 1px + 下方框的 1 px = 2 px。这就是为什么它似乎更厚。

解决这个问题的方法是对每种类型的盒子应用不同的样式。有4种，

1. 普通框（左侧和顶部边框）添加样式
2. 右侧的框（左侧和顶部的边框）
3. 底部的框（左上角和左下角的边框）
4. 右下角的一个框（所有 4 个边框）

jsfiddle 示例

在示例中添加了两个 css 类：.right 和 .last 您可以只为一个框提供多个类<li><a class="right last">...</a></<li>，以便您可以轻松地将样式应用于列表项。

Answer 3

这是我所拥有的：

body {
    margin: 10px;
}
ul {
    list-style: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-bottom: 0;
    border-right: 0;
}
ul:after {
    content: "";
    display: table;
    height: 0;
}

li {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    float: left;
    width: 50%;
}

/* Styles for Menu Items */
ul li a {
    text-decoration: none;
    color: #777;
    padding: 5px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

li > a {
    display: block;
}

ul li a:hover {
    color: #E2144A;
    background: #f9f9f9;
}

/* Hover Styles */
li ul li a {
    padding: 2px 5px;
}

/* Sub Menu Styles */
​

几点：

• 为了您和我们的利益，请正确缩进代码。
• 我所做的是在元素上设置左边框和下边框a，并在元素上设置上边框和左边框ul。这使得一个一致的 1px 边框。
• 我使用 clearfix 给出ul浮动元素的高度。
• 我用box-sizing: border-box它来设置，这样当我设置时width: 50%，它将是 50%，包括填充和边框（不是边距）。