Unequal Html текстовое поле и ширина выпадающего списка с XHTML 1.0 strict

Я пытаюсь иметь два входа (одно текстовое поле, одно раскрывающееся), чтобы иметь одинаковую ширину. Вы можете установить ширину с помощью css, но по какой-то причине поле выбора всегда на несколько пикселей меньше. Кажется, это происходит только с xhtml 1.0 strict doctype Любые предложения/идеи о причине/работе?Unequal Html текстовое поле и ширина выпадающего списка с XHTML 1.0 strict

Имея следующий HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <style> 
     .searchInput{ 
      width: 1000px; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <form action="theAction" method="post" class="searchForm" > 
     <fieldset> 
      <legend>Search</legend>    
      <p> 
       <!--<label for="name">Product name</label>--> 
       <input class="searchInput" type="text" name="name" id="name" value="" /> 
      </p> 
      <p> 
       <!--<label for="ml2">Product Group</label>--> 
       <select class="searchInput" name="ml2" id="ml2"> 
        <option value="158">INDUSTRIAL PRIMERS/FILLERS</option> 
        <option value="168">CV CLEAR COATS</option> 
        <option value="171">CV PRIMERS/FILLERS</option> 
        <option value="" selected="selected">All</option> 
       </select> 
      </p> 
      <input type="submit" class="search" value="Show" name="Show" id="Show" /> 
      <input type="reset" value="Reset" name="reset" id="reset" class="reset"/> 
     </fieldset> 
    </form> 
</body 
</html>

источник

2008-10-02 Boris Callens

Они отображают точно такую же ширину для меня в Firefox 2, какой браузер вы используете? – 2008-10-02 12:09:18

Я сам это заметил и был бы заинтересован в ответе ... – japollock 2008-10-02 12:12:59

Что касается каких браузеров: большинство из них. – 2009-03-02 15:10:10

Вы правы, есть разница 4px. input выходит на ширину 103px, а select - на 99px в ширину. Я понятия не имею, почему это происходит, но вы могли бы работать вокруг него, как это:

<style type="text/css"> 
    .searchInput { 
     overflow: hidden; 
    } 
    select.searchInput { 
     width: 101px; 
    } 
    input.searchInput { 
     width: 97px; 
    } 
</style>

Это действительно очень глупо, и я был бы очень интересно, если кто-то знал, почему это происходит, и способ, чтобы предотвратить это.

Работает на Webkit и Firefox. Разница в пикселях отличается в IE.

Самое смешное, что они обычно были бы того же размера, используя HTML-документ.

источник

2008-10-02 12:08:37

У меня была эта проблема в Firefox 2, но, похоже, она решена в Firefox 3 и IE7.

Моим решением было добавить отсутствующие пиксели в отдельную ширину для select.

источник

2008-10-02 12:09:59 Ross

-1

Кажется, что только с doctype добавлено это происходит. Исправлен пример.

источник

2008-10-02 12:27:16

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

Вы можете попробовать настроить обивку и границы, чтобы помочь разным виджетам формы совпадать.

источник

2008-10-02 13:31:54

@Paul Д. Уэйт - Надо согласиться с вами там

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

Пульт вокруг ваших элементов, чтобы выровнять их.

источник

2008-10-02 16:21:49

Вы можете попробовать сбросить поля, отступы и границы, чтобы увидеть, если это помогает:

.searchInput { 
    margin:0; 
    padding:0; 
    border-width:1px; 
    width:1000px; 
}

источник

2008-10-03 14:58:33

Это, кажется, что-то делать с блочной моделью. Более конкретно, похоже, что это связано с границей. Если вы используете firebug, посмотрите вкладку компоновки ...

Выбор показывает границу 2px, 0 дополнений и ширину 996px и высоту 18px.
Ввод показывает границу 2px, заполнение 1px 0 и ширину 1000 пикселей и высоту 16 пикселей.

Если вы установили границу на ноль (и присвоили ей цвет фона), вы увидите, что они будут того же размера, который показывает их ширину 1000 пикселей на вкладке макета.

.searchInput{ 
     width: 1000px; 
     border: 0; 
     background-color: #CCC; 
     overflow: hidden; 
    }

источник

2008-10-03 21:41:02 enobrev

Это связано с моделью коробки, которую поддерживает #IE, когда находит «строгое» в doctype. Если и изменить его на «традиционный» doctype, все ведет себя нормально ... но обычно не соответствует стандарту CSS.

CSS Box Model утверждает, что в ширине/высоте элемента прокладка и граница с ними не включаются. Таким образом, они являются дополнительными поверх указанной ширины элемента и, таким образом, на самом деле больше желаемого.

источник

2009-02-21 13:48:49

Unequal Html текстовое поле и ширина выпадающего списка с XHTML 1.0 strict

ответ

Смежные вопросы