锚定 (<a>) 尺寸，内部只有内联块跨度答案

【问题标题】：Anchor (<a>) dimensions with only inline-block spans inside锚定 (<a>) 尺寸，内部只有内联块跨度
【发布时间】：2011-07-31 20:36:58
【问题描述】：

谁能解释一下这段 HTML 是怎么回事？

http://jsbin.com/akome5

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

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

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

谢谢！！

【问题讨论】：

“为什么高度和宽度没有可见框那么大”的高度和宽度是什么？
蓝色框突出显示元素，而 OP 询问为什么蓝色框没有跨越红色和橙色框的整个高度。
完全正确：) 蓝框（萤火虫悬停）的宽度、高度和位置不是预期的。

标签： layout anchor html css

【解决方案1】：

尝试添加以下样式。

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

【讨论】：

这似乎有效。但是溢出：自动；真的有必要吗？此外，我需要在按钮之后添加一个元素来停止浮动（类似于
），这可能会变得有些复杂。
{ overflow: auto } 只是让容器（a.button）包裹它的浮动内容（spans）。否则，它不会尊重跨度的高度。您可以在下一个元素上使用 { clear: left } 来结束浮动。但我只是想以简单的方式问您的问题，并没有预见到使用此代码的页面中可能出现的其他问题。祝你好运：p

【解决方案2】：

Setting a width and height on an A tag

【讨论】：

【解决方案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;
}

旧（上）新（下）

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

【讨论】：

谢谢，但这不是我一开始就问的！我试图了解为什么尺寸不是预期的。此外，我需要 3 个元素，因为在真正的按钮中我使用的是背景图片和更多样式。

【解决方案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 指令是关键。

【讨论】：

做得很好。我不想在你的篝火上撒尿，但请记住 IE 6 & 7 和 Firefox 2 不支持 { display: inline-block }。在 Firefox 2 上，您可以使用 -moz-inline-block 并且网络上有各种针对 IE 6 和 7 的黑客攻击。不过我怀疑您是否支持 FF2，如果我们幸运的话，IE 6 和 7 很快就会死掉.干得好。