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