0

我有一个应该很大的输入按钮。然而，在当前的 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 属性将起作用。

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

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

4

2 回答 2

1

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

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

jsFiddle 示例

于 2013-11-12T20:31:25.830 回答
0

我认为这最终变得非常复杂。似乎 -webkit-appearance 的默认值在这里起作用。

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

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

我认为 -webkit-appearance:push-button 是罪魁祸首。

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

于 2013-11-12T20:47:09.907 回答