Почему размер элемента ввода HTML изменяется браузером? - PullRequest
Новая
       5

Почему размер элемента ввода HTML изменяется браузером?

2 голосов
/ 14 августа 2011

Я пытаюсь создать простую форму поиска на своем веб-сайте и использую элемент ввода HTML.Но это действительно странно.

Размер браузера изменяется независимо от того, какой размер я укажу в стиле.В приведенном ниже примере у меня есть элемент ввода шириной 180 пикселей, но браузер отображает его как 147 пикселей.: /

Знаете ли вы, в чем может быть проблема?

Вот пример видео и код ниже: http://screencast.com/t/WwqAQDmofhf

<div id="search" style="background-color:#000; height:100px;">
    <input style="  background: none repeat scroll 0 0 #FFFFFF;
                    border: medium none;
                    border-radius: 5px 5px 5px 5px;
                    color: #666666;
                    float: left;
                    line-height: normal;
                    margin: 6px;
                    padding: 6px 27px 6px 6px;
                    width: 180px;
                    z-index: 40;"
            type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div>

Ответы [ 2 ]

2 голосов
/ 14 августа 2011

Значение «ширина» зависит от блочной модели страницы.Традиционно ширина включала отступы и границы, но стандартная модель теперь исключает их.

Если у вас нет правильного типа документа в html, то большинство браузеров по умолчанию будут использовать традиционную блочную модель, и вы останетесь скоробка 147px.Добавление типа документа исправит его и заставит другой макет соответствовать стандарту. 

<!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
    <input style="  background: none repeat scroll 0 0 #FFFFFF;
                    border: medium none;
                    border-radius: 5px 5px 5px 5px;
                    color: #666666;
                    float: left;
                    line-height: normal;
                    margin: 6px;
                    padding: 6px 27px 6px 6px;
                    width: 180px;
                    z-index: 40;"
            type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>
0 голосов
/ 14 августа 2011

Это, вероятно, связано с: 

padding: 6px 27px 6px 6px;

27px отступа справа + 6px отступа слева + 147px заявленной ширины = 180px

Вы пробовали это с отключенным Javascript в вашембраузер?

Это происходит в этом примере?

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

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

...