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

注意右侧的按钮（没关系坏的造型......）。根据chrome dev-tools，它的高度为13px。但是封闭的div（.close）的高度为18px，但没有（css-）填充。

在firefox中，按钮的高度为13.33像素，高度为21像素

在Internet Explorer中

按钮的高度为5.33px，封闭的div高度为18.4px

所以我的问题是：这是为什么？标准是否允许这种行为，如果是，为什么？我无法找到关于此的具体信息。 2.如何避免这种情况。

Answer 1

设置

height : 100%;

将是一个强大的选项，正如live demo所示。

这是因为您的按钮可以根据屏幕尺寸快乐地缩放。

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

这意味着您的按钮＆＃39;将填充其父容器（在这种情况下，您的close div）。

Answer 2

更改

height: 1em;

为：

height: auto;

我认为这可以解决您的问题。