Layout 锚定（<；a>；）尺寸，内部只有内联块跨度

有人能解释一下这一小块HTML是怎么回事吗

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

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

向元素中添加“display:inline block；”似乎并不能真正修复它。 我怎样才能修好它

---

谢谢

尝试添加以下样式

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

---

我会提出一种不涉及跨度的不同方法

html:

旧（顶部）新（底部）

---

关于信息，我设法在没有浮动的情况下完成它：左，以下是整个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;
}

a按钮{
显示：inline block；/*“为什么高度和宽度不如可见框大”什么的高度和宽度？蓝色框突出显示元素，而OP询问为什么蓝色框没有覆盖红色和橙色框的整个高度。确切地说：）蓝色框的宽度、高度和位置（firebug悬停）不是预期的。Thx但这不是我一开始问的问题！我试图理解为什么尺寸不是预期的尺寸。此外，我需要3个元素，因为在真实按钮中，我使用了背景图像和更多样式。这似乎可行。但是overflow:auto；真的有必要吗？此外，我需要在按钮后添加一个元素停止浮动（类似于
），这可能会变得有些复杂。{overflow:auto}只会使容器（a.button）包装其浮动内容（跨距）。否则，它将不考虑跨距的高度。您可以使用{clear:left}但我只是想用一种简单的方式问你的问题，并没有考虑在使用此代码的页面中可能出现的其他问题。祝你好运：成功。我不想在你的篝火上撒尿，但请记住IE6&7和Firefox2不支持{display:inline block}.在Firefox2上，你可以使用-moz内联块，IE 6和7在网络上有各种各样的黑客攻击。不过我怀疑你是否支持FF2，如果幸运的话，IE 6和7很快就会死。干得好。
/* 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;
}

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;
}