Закрытие div выше, чем содержащая кнопка

Question

Я пытаюсь сделать простой накладной уведомлений. Вы можете увидеть мой код здесь: http://jsfiddle.net/0uaqsz57/

соответствующий код заключается в следующем:

<div class="close"> 
    <button class="btn action-link">close</button> 
</div> 

и

.close { 
     text-align: right; 
     button { 
      line-height: 1em; 
      height: 1em; 
     } 
    }  

Обратите внимание на кнопку на правой стороне (фигу плохой укладки ..). Он имеет высоту 13 пикселей, согласно хром-инструментам. Закрывающий div (.close), однако, имеет высоту 18px, но нет (css-) padding.

в светлячок, кнопка имеет высоту 13,33 рх и DIV высота 21px

в интернет-исследователя высота кнопки является 5.33px и вмещающих Див высоту 18.4px

Итак, мой вопрос: 1. Почему это? Позволяет ли стандарт допускать такое поведение, и если да, то почему? Я не мог найти конкретную информацию об этом. 2. Как этого избежать.

Answer 1

Установка

height : 100%; 

будет надежным вариантом, так как это live demo шоу.

Это потому, что ваша кнопка может тогда весело масштабироваться в зависимости от размера экрана.

.close { 
      text-align: right; 
      button { 
       line-height: 1em; 
       height: 100%; 
      } 
     } 

Это означает, что ваш «кнопку» наполнит его родительский контейнер (в данном случае это ваш close div).

Answer 2

Изменение

height: 1em; 

к:

height: auto; 

Я думаю, что это устранит проблему.

http://jsfiddle.net/0uaqsz57/1/