输入按钮不响应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类中，那么高度属性就可以工作了。

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

注意:我正在使用谷歌Chrome。

Answer 1

您需要给文档一个高度，因为按钮的高度将相对于祖先的高度。添加：

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

jsFiddle实例

Answer 2

我觉得这会变得很复杂。似乎-webkit外观的默认值就是这里所起的作用。

当我查看dev tools中的elements面板时，我看到了以下用于-webkit外观的值：

1. <button> (带边框)：按钮
2. <input type="submit"> (带边框)：按下按钮
3. <button>或<input type="submit"> (无按钮)：无

我认为-webkit-外观:按钮是罪魁祸首。

看这把小提琴：http://jsfiddle.net/jameslafferty/KDFBE/