HTML 5 Doctype Textfield больше заданной ширины - PullRequest
Новая
       3

HTML 5 Doctype Textfield больше заданной ширины

0 голосов
/ 18 января 2019

Когда я использую <!DOCTYPE html>, мое текстовое поле больше (около 257 пикселей вместо 250 пикселей). У кого-нибудь есть идеи, почему это будет? Я ничего не смог найти в сети. 

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>

    <body>
        <form>
            <input type='text' style="width:250px">
            <div style='width:250px;background-color:#00FF00'>&nbsp;</div>
        </form>
    </body>
</html>

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Попробуйте это 

.inp {
  box-sizing:border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px" class= "inp">
<div style='width:250px;background-color:#00FF00'>&nbsp;</div>

</form>
</body>
</html>
0 голосов
/ 18 января 2019

Это стиль по умолчанию для браузера, от chrome dev: 

input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}

Таким образом, граница занимает 2 * 2px, а отступ занимает 2 * 1px, равный 256px

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

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

...