Как получить правильный рендеринг кнопки рядом с текстовым полем в Firefox? - PullRequest
Новая
       0

Как получить правильный рендеринг кнопки рядом с текстовым полем в Firefox?

1 голос
/ 24 ноября 2010 
<html>
    <head>
        <style type="text/css">
            #theInput
            {
                border:solid 1px gray;
                height:20px;
            }
            #theButton
            {   
                border:solid 1px gray;
                height:20px;
            }

        </style>
    </head>
    <body>
        <input type="text" id="theInput"><input type="button" value=" Go " id="theButton">
    <body>
</html>

При рендеринге предыдущего в Firefox кнопка примерно на 1 пиксель выше текстового поля. Как это исправить? Без указания типа документа высота идеально подходит для Chrome и на удивление даже для IE6, но не для Firefox?

Ответы [ 2 ]

3 голосов
/ 24 ноября 2010

Если вы используете последний DOCTYPE, такой как HTML 4.01 или XHTML 1.0 или 1.1, а затем последовательно в FF, Chrome и IE 8, кнопка на самом деле на 2 пикселя короче, чем текстовое поле. В FF Firebug фактически сообщает о размере 18px. Поэтому я рекомендую использовать стандартный DOCTYPE, соответствующий стандарту, а также стилизовать кнопку на 2 пикселя выше, чем текстовое поле:

http://jsfiddle.net/DPbsA/8/

Вот один с оранжевым прямоугольником слева, с высотой = 20px и границей = 1px сверху и снизу, что дает общую «визуальную высоту» прямоугольника 22px:

http://jsfiddle.net/DPbsA/12/

Возможно, вы захотите использовать стандартный DOCTYPE, соответствующий стандарту, потому что без них блочные модели между FF / Chrome и IE могут быть совершенно разными.

0 голосов
/ 24 ноября 2010

Всегда хорошо иметь стандартный тип документа, поскольку IE возвращается к режиму причуд, если вы не указали тип документа.

добавьте padding-bottom, он будет выровнен с текстовым полем

дайте мне знать, если вам нужно что-то еще 

    #theButton
                {   
                    border:solid 1px gray;
                    height:20px;
                    padding-bottom:2px;


}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...