html - 输入按钮不响应 CSS

Question

我有一个应该很大的输入按钮。然而，对于当前的 CSS，它只能延伸很宽。高度未触及。

HTML:

<form action="feedback.cfm" method="POST">
    <input type="hidden" name="send" value="mail" />
    <input class="hugeButton" type="submit" value="Click Me To Send A SpreadSheet Report" />
</form>

CSS:

<style type="text/css">
    .hugeButton {
        width:100%;
        height:45%;
        font-size:x-large;
    }
    .hugeButton:hover {
        cursor:pointer;
    }
</style>

现在，如果我将 border:none 添加到我的 .hugeButton 类中，height 属性就会起作用。

所以我的问题是:为什么输入按钮的边框“禁用”高度属性？

注意:我使用的是谷歌浏览器。

Answer 1

您需要为文档指定一个高度，因为您的按钮的高度将与祖先按钮的高度相关。添加:

html,body,form {
    height:100%;
}

jsFiddle example