对包含跨度的 div 使用 float right 时没有右边框？

Question

我想在页面右侧添加一些带有边框的项目。但是边框只对顶部、左侧和底部可见，而在 webkit 浏览器中不可见。我已经在 Windows 版 Google Chrome、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

如果去掉'no right border'周围多余的span标签，其实是有右边框的。

http://jsfiddle.net/ZWWct/

您也可以将您的 css 简化为：

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