border-box + padding + max-width = прыгающие элементы?

Question

Пожалуйста, посмотрите на эти два скрипками:

http://jsfiddle.net/Fw4dg/2/embedded/result/

<style> 
    .outer, .inner { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; } 

    .outer { 
     max-width: 600px; 
     border: 1px solid #0f0; 
     padding: 40px 10%; } 

    .inner { 
     border: 1px solid #f00; } 
</style> 

<div class="outer"> 
    <div class="inner"> 
     <p>Watch the parent element's padding change when you narrow the viewport.</p> 
    </div> 
</div> 

Когда вы сузить окно мимо края внешней коробки, горизонтальное заполнение этого ящик внезапно сжимается, и остается на своей новой ширине даже после расширения окна снова (WebKit и Gecko).

http://jsfiddle.net/Fw4dg/1/embedded/result/

В другом примере, второй плавающий элемент очищает первый плавающий элемент после того, как окно сужается и снова расширился (только WebKit):

http://jsfiddle.net/Fw4dg/1/embedded/result/

Такое поведение как в WebKit (тестируется в Safari 6.0.5 и Chrome 29.0.1547.49 beta) и Gecko (протестирован в Firefox 23 beta 10). Это происходит с границами или без них.

Если сузить и расширить окно несколько раз, вы можете получить некоторые довольно странные эффекты в Safari:

Ближайшее сообщение об ошибке к этому, что я смог найти в Bugzilla, но не как представляется, описывая совершенно то же самое:

https://bugzilla.mozilla.org/show_bug.cgi?id=308801

это известная проблема?

Answer 1

Если вы ищете решение, оно могло бы быть там. Просто добавьте display: table; в ваш элемент .inner.