锚定 () 尺寸，内部仅包含内联块跨度

Question

有人可以解释一下这一小段 HTML 发生了什么吗？

http://jsbin.com/akome5

在大多数当前浏览器（FF4、Chrome10、IE9、IE8、Opera 11)，元素的布局如下所示：

嗯？！我不明白为什么？！ 为什么高度和宽度不像可见框（橙色+红色空格）那么大？

添加“display:inline-block;”到该元素似乎并没有真正解决它。 我该如何解决它？

谢谢！！

Answer 1

• 设置 A 标签的宽度和高度

Answer 2

尝试添加以下样式。

a.button {
    display: block;
    float: left;
    overflow: auto;
}
a.button span {
    display: block;
    float: left;
}

Answer 3

我建议采用一种不涉及跨度

html 的不同方法：

<a class="button2" href="#">Text Text Text</a>

css:

/* Button 2 */
.button2 {
    background-color:red;
    border:solid 10px orange;
    border-top:0;
    border-bottom:0;
    display:inline-block;
    color:#fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
    padding:0 3px;
}

old (top)新（底部）

http://jsfiddle.net/pxfunc/vr7gJ/

Answer 4

有关信息，我设法在没有 float:left 的情况下做到这一点，这是整个 CSS：

a.button{
    display: inline-block; /* <- added */
    text-decoration: none;
}

a.button span{
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
    line-height: 30px; /* <- added */
    text-decoration: none;
}

a.button .left, a.button .right{
    background-color: orange;
    width: 10px;
}

a.button .text{
    background-color: red;
    color: white;
}

line-height 指令是关键。