Misplacement of submit type input in Firefox when using min-height

StackOverflow https://stackoverflow.com/questions/14587372

题

A simple page:

<!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>

is rendered as I expected (same two buttons next to each other) in Opera and Chrome, but Firefox 18.1 renders the first one lower than the second one with difference equal to border size in most cases. If I set display: block or float: left for the first one, that empty space at the top disappears, but the text inside is still misplaced, vertically higher than it should be. It seems when min-height is used, the text is positioned using bottom margin or padding of some kind disregarding border size.

Why is this happening? Is it a Firefox bug, intended feature or different intepretation of some standards? Is it possible to force Firefox to render the first button the same as the second one while still using min-height?

有帮助吗？

解决方案

This is a firefox bug. You can track its resolution here: https://bugzilla.mozilla.org/show_bug.cgi?id=835873

其他提示

Change the value for verical-align, from baseline to middle or something else for both.

Edit: consider using the <button> tag

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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top