медиазапросы и Плавающие/Ломая Пролеты

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 обе строки текста находятся на одной и той же линии.

Когда размер окна меньше, пролет разбивает линию, но изменение размера окна больше не отменяет поведения. Разрыв строки остается, и диапазон плавает на следующей строке. Это правильное поведение? И есть ли способ обойти это: способ, которым промежуток может снова стать встроенным в другой текст?

Update: (? И Blink) Это ошибка в Webkit https://bugs.webkit.org/show_bug.cgi?id=53166

Answer 1

Как отметил @thirtydot в комментарии, это WebKit ошибка, мор Информация в этом вопросе: Webkit float and display

Для достижения disired макета, вы можете сделать это:

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; 
    } 
}