Установка ширины как текстового поля (т.е. типа ввода = "текст" ), так и текстового поля до 500 пикселей не работает в IE6 и Chrome, работает только в FF2 (не проверял другие браузеры), IE и Chrome добавляет два пикселя в текстовое поле.
Заполнение и маржа установлены на 0 для всех элементов, используя
*
{
margin: 0px;
padding: 0px;
}
Изменение doctype из xhtml 1.0, переходного к строгому, тоже не работало.
Вам нужно явно установить границу 1px и сделать ширину 498px или сделать границу 0 и ширину 500px, хотя последняя сделает невозможным увидеть вход, если вы не знаете его там, поэтому оттуда это просто проблема стилизации.
Возможно, вам повезло с помощью набора стилей reset в вашем CSS. Они значительно облегчают устранение различий между браузерами между способами отображения элементов.
Эрик Мейер (один из лучших умов в CSS) описывает стили reset и почему он использует их здесь - с его последняя версия здесь.
Тем не менее, не зная общего эффекта, который вы пытаетесь достичь, элементы формы, как известно, трудно подстроить таким образом, который идеально согласуется с платформами браузеров. Удачи.:)
Я использую CSS3, чтобы сделать текстовое поле и входные данные одинаковыми. См. jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Работает в IE8 +, см. caniuse.
Я также считаю, что проблема находится на границе. Попробуйте определить стиль границы специально для входов /textarea вместе с их шириной.
input, textarea { граница: 1px сплошной серый; ширина: 498px; }
Также посмотрите в источнике, если input/textarea не определены нигде или в их собственном теге (например, size или rows/cols). Другой вариант, когда IE беспорядочно использует специальный файл css для него. Однако имхо не нужно в вашем случае.
Я бы порекомендовал сначала избегать этого правила "звезды" reset, так как он только путает проблемы по линии. Вместо этого предпочитайте конкретный reset как
ul, ol, p, blockquote, h1, h2/etc.../{margin: 0; обивка: 0; }
ЭЛЕМЕНТЫ ФОРМЫ, по сути, являются тем, где правило звезды наносит наибольший урон.
AFAIK, устанавливая прописку и ширину явно в текстовое поле и элемент ввода, даст точную ширину пикселя во всех браузерах.
IE6 добавляет 1px margin к TOP и BOTTOM, я верю, а не к сторонам.
Здесь пример правила reset taht does'nt нарушает свойства по умолчанию элементов формы:
/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/
body {
font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif;
margin:0; padding:0;
background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
color:#303030;
}
p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }
/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }
Это просто случайные, но вы получаете эту идею. Не очищайте поля и отступы от всего, гораздо безопаснее очищать все, что вам нужно, и оставлять настройки браузера в другом месте.
Я экспериментировал и обнаружил, что "соотношение" между текстовым вводом и текстовым полем может быть рассчитано с использованием 21 * 8 * x.
Если у вас
< input type = "text" size = "X" / " > < бр /" > < textarea cols = "X" > </TextArea>
... и вы хотите, чтобы они были одинаково широкими, используйте эту формулу для расчета ширины входного текста.
если x = 70, тогда 21 * 8 * 70 = 581px
Итак, вы напишете:
< input type = "text" size = "70" style = "width: 581px" / " > < br/" > < TextArea смещ_по_столбцы = "70" > </TextArea>
Оба станут равными!
Таким образом, в программе/веб-сайте/etc вы можете ввести одно и то же значение и получить тот же результат (cols в textarea)!
Try
input{
border:none;
}
<!--***********************CSS**************************-->
<style>
.set_font
{
font-family:verdana;
font-size:10px;
color:#ffffff;
width:250px;
}
.set_font2
{
font-family:verdana;
font-size:10px;
color:#000000;
width:250px;
}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>