html - 封闭的 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;
        }
  }     

注意右侧的按钮(不要介意糟糕的样式..)。根据 chrome 开发工具，它的高度为 13px。然而，封闭的 div (.close) 的高度为 18px，但没有 (css-)padding。

在 firefox 中，按钮的高度为 13.33 px，div 的高度为 21px

在 Internet Explorer 中，按钮的高度为 5.33px，封闭的 div 的高度为 18.4px

所以我的问题是:1.这是为什么？标准是否允许这种行为，如果允许，为什么？我找不到这方面的具体信息。2. 如何避免这种情况。

Answer 1

设置

height : 100%;

将是一个可靠的选择，因为这个 live demo显示。

这是因为您的按钮可以根据屏幕大小愉快地缩放。

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

这意味着您的“按钮”将填充其父容器(在本例中是您的close div)。