Block element inside inline block acting weird in Firefox

Question

Can anyone explain this behavior in FF?

Fiddle: http://jsfiddle.net/4mrt8wq3/

<style>
    .b { display: inline-block; }
    #a { display: block; }
</style>

<div class="b">
    <label>xxxxxxxxxx</label> 
    <input type="text" id="a"/>
</div>
<div class="b">
    <label>xxxxxxxxxx</label>
    <div> / </div>
</div>

Only in firefox is the first div located one line below the second. It works correctly in Chrome and IE (at least IE11). As if the block element inside the built-in block for some reason is wrapped under the second element.

Overflow usage: hidden in the first div fixes the problem, but the second div is then lightly placed with about 4 or 5 pixels of the field above it. The overflow placement hidden on both leads to proper visualization.

I am not looking for a solution to the problem , as I already found it, but I can’t explain the behavior ... Can someone explain WHY he does it?

Answer 1

, . , , .

div "b" div "/". div "b" .

div "b" . : div?

display:block, Firefox1 , "", CSS, . , div "b" - , , "/".

Chrome . Chrome , CSS, , div "b" , , '/'.

`overflow: hidden ', , .

---

, . . , , . , , O/S. O/S CSS, , . "" .

, . , , , CSS, , , CSS .

, CSS. , -, , , . , . , , , , .

, . HTML5 , , Chrome , , , Chrome, , - Firefox .

, , , , .

---

¹ _{IE11 Firefox. Opera 28 (blink engine, Chrome) Chrome. Opera 12 ( ) Firefox.}

Answer 2

, : hidden . Firefox , . Chrome .

:

<style>
  .b { display: inline-block; 
  vertical-align: top; /*add this line */
  }
  #a { display: block; }
</style>