媒体查询和浮动/突破跨度

Question

span {
    display: block;
}

@media (min-width: 500px) {
    span {
        display: inline;
        float: right;
    }
}

<p>Some text. <span>Some occasionally-floated text.</span></p>

在此Fiddle中，如果结果窗口大于500px，则两行文本都在同一行。

当窗口调整为较小时，跨度会破坏该行，但是再次调整窗口大小并不会反转该行为。换行符保持不变，跨度浮动在下一行。 这是正确的行为吗？是否有办法绕过它：跨度可以再次与其他文本内联的方式？

更新：这是Webkit中的一个错误（和Blink？）https://bugs.webkit.org/show_bug.cgi?id=53166

Answer 1

正如@thirtydot在评论中所指出的，这是一个webkit bug，在这个问题中的信息：Webkit float and display

要实现令人反感的布局，您可以这样做：

<强> FIDDLE

HTML：

<p><span class="left">Some text. </span><span class="right">Some occasionally-floated text.</span></p>

CSS：

.left{
    float:left;
}
.right {
    clear:left;
    float:left;
}

@media (min-width: 500px) {
    .right {
        float: right;
        clear:none;
    }
}