Проблема с <input type = 'text' /> и шириной <textarea>
В следующем коде элементы INPUT и TEXTAREA отображаются шире, чем должны. Как я могу ограничить их до 100% полезной площади в div?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<style>
.mywidth{ width:100%; }
</style>
</head>
<body>
<div style = "border: 3px solid green; width: 100px;">
<input class = "mywidth" ><br />
<textarea class = "mywidth"></textarea><br />
<div style = "background-color: yellow;" class = "mywidth">test</div>
</div>
</body>
</html>
Примечание. Если я удалю DOCTYPE, он будет отображаться, как ожидалось, с INPUT, TEXTAREA и внутренним DIV одинаковой ширины и не выходящими за пределы содержащего DIV.
Обновление: несмотря на границы по умолчанию для этих элементов, он по-прежнему отображается некорректно в IE7.
Ответы 6
Вместо этого вы можете попробовать использовать этот DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
У полей ввода и текстовых полей по умолчанию есть границы.
<style>
.mywidth{
width:100%;
border:0;
}
</style>
отобразит все элементы в вашем контейнере.
Обновлять
IE также имеет левое и правое заполнение для каждого элемента, и следующий CSS подходит для всех элементов в контейнере в FF3, FF2, Safari 3, IE6 и IE7.
<style>
.mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>
Однако не забывайте, что вам, вероятно, понадобится граница и, возможно, заполнение, чтобы поля отображались для пользователей как обычно. Если вы установите эту границу и отступы самостоятельно, вы будете знать, в чем разница между шириной контейнера и шириной, которую вам нужно будет передать элементам input / textarea в разных браузерах.
Ты это пробовал? Проверьте IE7. Он все еще входит в зеленую границу содержащего div.
Извините, я на Mac! Я посмотрю, что я могу сделать в IE7.
Добавьте "padding-right: 3px;" в div, чтобы он читался как:
<div style = "border: 3px solid green;padding-right:3px; width: 100px;">
Потому что вы добавили границу к div, которая также считается внутренним пространством div.
Причина, по которой он работает без объявления документа, заключается в том, что браузер не отображает страницу как переходный XHTML, а как простой старый HTML, который имеет другой метод рендеринга для div и т. д.
У @Phil есть ответ выше.
Между прочим, использование Firebug действительно показывает границы по умолчанию для текстового поля и элементов ввода. Так что использование Firebug могло помочь.
В FF это выглядит нормально, но в IE7 все равно отображается некорректно.
Кажется, что строгий код xhtml делает это с формами. Я просто растягиваю поля ввода и текстовые поля на 99%, и это, кажется, работает. попробуйте.
У меня была такая же проблема. Я использовал свойство box-sizing, упомянутое здесь:
Как сделать TextArea шириной 100% без переполнения, если в CSS есть отступы?
Вот как это выглядело для меня:
<style>
.mywidth{
width:100%;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
Это не будет работать в IE7 или более ранней версии, так как старые браузеры не поддерживают изменение размера окна. Кроме того, вы должны обязательно включать -ms-box-sizing и всегда указывать фактическое свойство CSS3 (box-sizing) последним, поэтому, как только браузеры реализуют реальное свойство CSS, оно перезапишет их версию, зависящую от поставщика.
@RussellUresti: хороший звонок, я обновил свой ответ на основе вашего комментария
Отсутствие DOCTYPE заставит браузер перейти в режим причуд, используя старую неправильную блочную модель, которая не считает границу частью ширины.