html - 对包含跨度的 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

如果你去掉“无右边框”周围的额外跨度标签，实际上有一个右边框。

http://jsfiddle.net/ZWWct/

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

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