Question

一个简单的页面：

<!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，则顶部的空白区域会消失，但内部文本仍然放错位置，垂直高于应有的位置。在使用最小高度时，似乎使用底部边距或某种填充来定位文本而忽略边框大小。

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

Answer 1

这是一个firefox错误。您可以在此处跟踪其解决方案：https://bugzilla.mozilla.org/show_bug.cgi?id=835873

Answer 2

将verical-align的值从baseline更改为middle或其他内容。

修改：请考虑使用<button>代码

Answer 3

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>

使用min-height时Firefox中提交类型输入的错位

3 个答案: