0

一个简单的页面：

<!DOCTYPE html> 
<html>
<head>
    <style type="text/css">
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

        #btn, #btn2
        {
            border: solid 5px #FFA354;
            background-color: #FFDB82;
            width: 100px;
        }

        #btn { min-height: 50px; }
        #btn2 { height: 50px; }
    </style>
</head>
<body>
    <form method="post" id="oogaboogabooga">
        <input type="submit" id="btn" value="btn" /><input type="submit" id="btn2" value="btn2" />
    </form>
</body>
</html>

在 Opera 和 Chrome 中按我预期的方式呈现（相邻的两个按钮相同），但 Firefox 18.1 呈现的第一个低于第二个，在大多数情况下差异等于边框大小。如果我设置display: block或float: left为第一个，顶部的空白空间消失，但​​里面的文本仍然错位，垂直高于它应该的位置。似乎在使用 min-height 时，文本使用底部边距或某种填充来定位，而不管边框大小。

为什么会这样？它是 Firefox 错误、预期功能还是对某些标准的不同解释？是否可以强制 Firefox 在仍在使用时将第一个按钮与第二个按钮呈现相同min-height？

4

3 回答 3

2

这是一个火狐的错误。您可以在此处跟踪其分辨率：https ://bugzilla.mozilla.org/show_bug.cgi?id=835873

于 2013-01-29T18:01:18.377 回答
0

更改verical-align, from baselineto的值middle或两者的其他值。

编辑：考虑使用<button>标签

于 2013-01-29T16:30:34.297 回答
0 
please use this css

     <style type="text/css">
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    #btn, #btn2
    {
        border: solid 5px #FFA354;
        background-color: #FFDB82;
        width: 100px;
        float:left;
        margin:1px;
        height:50px;
        line-height:50px;
    }

</style>
于 2013-01-29T17:05:00.120 回答