Отображение различной ширины текстового поля на разных страницах - PullRequest
Новая
       26

Отображение различной ширины текстового поля на разных страницах

1 голос
/ 11 сентября 2011

У меня есть следующее текстовое поле на моей первой HTML-странице: 

<input tabindex="4" type="text" class="search_textbox roundedCorners" id="search_query" name="search_query"/>

.roundedCorners{        
  border:1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
.search_textbox {
  position: absolute;
  width: 187px; 
  height: 21px;    
  left: 96px;
  top: 96px;    
  padding-right: 29px;
  padding-left: 48px;
}

Когда я вижу его в браузере, на первой странице «конечная» ширина search_textbox составляет 187 + 48 + 29 = 264 пикселя.Но когда я вставляю ту же вещь на второй странице и открываю ее в том же браузере, «конечная» ширина search_textbox составляет всего 187 пикселей.

Я тестирую ее в Chrome и Mozilla.Все они показывают одну и ту же картинку.

Почему?Я что-то не так делаю или что?

ОБНОВЛЕНИЕ 1

Я заметил, что на второй странице Chrome автоматически добавляет следующий стиль, а на первой странице -не добавляя его: 

input:not([type="image"]), textarea {                    user agent stylesheet
  -webkit-box-sizing: border-box;
}

Я думаю, что это свойство вызывает эту ошибку с шириной, верно?Но я искал во всех моих файлах .css и не мог найти это свойство вообще.Как Chrome добавляет это свойство на одной странице, а не добавляет на другой?

ОБНОВЛЕНИЕ 2

Я решил проблему. IЯ заметил, что на первой странице у меня было <!DOCTYPE html> утверждение, но на второй нет, поэтому, как только я добавил это утверждение на вторую страницу, проблема была решена.Но все же мне просто интересно, почему?

1 Ответ

2 голосов
/ 11 сентября 2011

Видя, что вы исправили свою проблему, этот ответ немного излишний, но что угодно: -)

Вы, наверное, уже знаете это, но ширина textarea 187px по умолчанию для вашего браузера, что приятно подводит нас к следующему абзацу.

Причина, по которой стили CSS не выбираются и не анализируются документом без типа документа, связана с тем, что с технической точки зрения это недопустимый документ. После добавления типа документа проблема решена.

...