Как сделать текстовое поле одинаковой ширины для всех браузеров

Question

Как сделать текстовое поле одинаковой ширины для всех браузеров

0

У меня есть текстовое поле с фиксированной шириной. Я борюсь с совместимостью с браузером. Когда я фиксирую ширину в Firefox, Chrome не отображается правильно, он показывает большую длину вправо.

ОБНОВЛЕНО Мой код

HTML

<form name="welcomeDiv1" id="welcomeDiv1">
<tr class="unsortable" >

<tr>
 <td>
<input type="text" class="textbox_form" name="content" id="content" />
</td>

<td>
<input type="text" class="textbox_form2" name="content2" id="content2"/ >
</td>

 <td>
 <input type="text" class="textbox_form3" name="content3" id="content3"/ >
 </td>

 <td>   
  <input type="text" class="textbox_form4" name="content4" id="content4" />
  </td>

<td>
<input type="text" class="textbox_form5" name="content5" id="content5"/ >
</td>

<td>
 <input type="text" class="textbox_form6" name="content6" id="content6" />
 </td>  

<td> <input type="submit" class="textbox_form7"  value="+"  name="submit" class="globalinsert_button"/></td>

  </tr>
 </form>

CSS

.textbox_form {
               margin:0 0 0 1px;
               width:162px;
               height:30px;
               background-color:#C2FFC2;
    }
    .textbox_form2 {
              margin:0 0 0 -3px;
              width:329px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form3 {
              margin:0 0 0 -3px;
              width:386px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form4 {
              margin:0 0 0 -3px;
              width:138px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form5 {
              margin:0 0 0 -2px;
              width:158px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form6 {
              margin:0 0 0 -2px;
              width:204px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form7 {
             margin:0 0 0 17px;
    }

Мне нужно, чтобы текстовое поле размещалось точно так же во всех браузерах. но по-прежнему остается той же проблемой

arokia 20 сен. 2013, в 13:58

Источник

Теги:

html

css

cross-browser

4 ответа

Ещё вопросы

user2775080 · Answer 1 · 2013-09-20T10-29-00.000Z

Ваш атрибут стиля не закрыт, проверьте.

Попробуйте отдельный стиль css следующим образом: добавьте класс 'textbox_form' в каждое текстовое поле

<style>
    .textbox_form {
        margin-left: 5px;
        margin-top: 5px;
        width: 150px;
        background-color:#C2FFC2;
    }
    </style>

    <td>
    <input type="text" class="textbox_form" name="content" id="content" border:0px">
    </td>

Ilya Streltsyn · Answer 2 · 2013-09-20T10-47-00.000Z

Установите box-sizing: border-box (вместе с его -moz- префиксом) для input[type="text"]. Это делает пометки по умолчанию для браузера и т.д., Не влияет на результирующие размеры, а также делает элементы input подчиненными той же модели окна, что и элементы select и textarea (они имеют неявный box-sizing: border-box по умолчанию в большинстве браузеров), делая форму стилизация проще.

Spudley · Answer 3 · 2013-09-20T09-40-00.000Z

~~Во-первых, ваш код недействителен HTML.~~ ~~Атрибуты name и id по-видимому, помещены внутри атрибутов style ;~~ ~~это неверно и делает код invald.~~ ~~Это необходимо исправить.~~

Во-вторых, я настоятельно рекомендую использовать отдельный CSS файл для ваших стилей. Это поможет вам избежать повторения, а также упростит создание похожих полей в одинаковых стилях.

[РЕДАКТИРОВАТЬ] Вышеуказанные два момента были исправлены в вопросе.

Наконец, моя догадка о конечной причине проблемы с кросс-браузером заключается в том, что ваша страница, вероятно, будет отображаться в режиме Quirks. Если ваша страница не имеет действительного <!DOCTYPE> в начале, она перейдет в режим quirks, что приведет к тому, что разные браузеры будут отображать страницу по-разному. Исправьте эту (и другие ошибки HTML, которые у вас есть), и вы получите лучшую совместимость между браузерами.

Coop · Answer 4 · 2013-09-20T09-24-00.000Z

Вы неправильно используете разметку для встроенного стиля. Он должен выглядеть следующим образом:

<input type="text" style="margin:0 0 0 -3px; width:386px; height:30px; background:#C2FFC2; border:none" name="content3" id="content3" />

Кроме того, используйте внешнюю таблицу стилей CSS! В противном случае вы повторяете много кода.

я попробовал его остается той же проблемой