Неравное текстовое поле HTML и ширина раскрывающегося списка в строгом XHTML 1.0 - PullRequest
Новая
       13

Неравное текстовое поле HTML и ширина раскрывающегося списка в строгом XHTML 1.0

9 голосов
/ 02 октября 2008

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

Имея следующий 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>

Ответы [ 8 ]

5 голосов
/ 03 октября 2008

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

.searchInput {
    margin:0;
    padding:0;
    border-width:1px;
    width:1000px;
}
3 голосов
/ 04 октября 2008

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

Выбор показывает 2-пиксельную рамку, 0 отступов, ширину 996 пикселей и высоту 18 пикселей.
На входе отображается граница размером 2 пикселя, отступы 1 пикселя, ширина 1000 пикселей и высота 16 пикселей.

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

    .searchInput{
        width: 1000px;
        border: 0;
        background-color: #CCC;
        overflow: hidden;
    }
0 голосов
/ 21 февраля 2009

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

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

0 голосов
/ 02 октября 2008

@ Пол Д. Уэйт - Должен согласиться с вами там

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

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

0 голосов
/ 02 октября 2008

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

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

0 голосов
/ 02 октября 2008

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

0 голосов
/ 02 октября 2008

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

Мое исправление заключалось в добавлении недостающих пикселей к отдельной ширине для select.

0 голосов
/ 02 октября 2008

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

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

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

Обходной путь работает в Webkit и Firefox. Разница в пикселях отличается в IE.

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

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

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

...