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

Answer 2

我觉得这很复杂。似乎-webkit-appearance的默认值是在这里发挥作用。

当我查看开发工具中的元素面板时，我看到-webkit-appearance的以下值：

<button>（带边框）：按钮
<input type="submit">（带边框）：按钮
<button>或<input type="submit">（不带按钮）：无

我认为-webkit-appearance：按钮是罪魁祸首。

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

输入按钮不响应CSS

2 个答案: