当使用包含span的div时，没有右边框？

Question

我想在页面右侧放置一些带边框的项目。但边框仅在顶部，左侧和底部可见，但在webkit浏览器中不可见。我已经在Google Chrome for Windows，iPhone上的Safari和Android上的Chrome上进行了测试。然而，Firefox和IE在我所期望的四个方面都显示了边界。

HTML：

<div class="outer">
    <span class="wrapper">
        <span>no right border</span>
    </span>
</div>

CSS：

.outer {
    float: right
}

.wrapper {
    border: 1px solid black;
}

在此处查看实时示例： http://jsfiddle.net/3t7zW/2/

这是webkit中的已知错误还是我必须向css添加内容？

Answer 1

我认为它与内联有关。如果您将display:block（或display: inline-block）添加到.wrapper，则会显示边框。

Answer 2

如果你在'无右边框'周围取出额外的跨度标签，实际上有一个右边框。

http://jsfiddle.net/ZWWct/

您也可以将css简化为：

.wrapper { float:right; border: 1px solid black; }