Выберите поле не в строке в IE - PullRequest
Новая
       9

Выберите поле не в строке в IE

0 голосов
/ 08 апреля 2009

Хорошо, я не хотел задавать этот вопрос, так как это должно быть довольно простое решение, но я часами пытался решить его безрезультатно. У меня есть веб-страница с текстовым полем, а затем выпадающий список рядом друг с другом. В Firefox и Chrome они отлично сочетаются друг с другом, но в IE поле выбора находится выше, чем текстовое поле. Theres не CSS применяется к этому полю выбора или текстовое поле.

image

Это страница формата aspx, для которой генерируется HTML-код: 

<label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label>
<input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" />
<select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList">
            <option value="domain.com">domain.com</option>
            <option value="doamin1.com">domain1.com</option>
            <option value="domain2.com">domain2.com</option>
            <option value="domain3.com">domain3.com</option>
        </select>

Ответы [ 5 ]

3 голосов
/ 08 апреля 2009

Оказывается, эта проблема была связана с CSS. Это был параметр границы для элемента select, спрятанного глубоко в таблице стилей Blueprint только для IE, поэтому он не отображался в firebug. Для всех, кто сталкивается с этим, это CSS для элемента select 

margin : 0.5em 0px
3 голосов
/ 08 апреля 2009

Используете ли вы какой-либо CSS для сброса полей и отступов по всем тегам? Весьма полезно начать свою таблицу стилей с чего-то вроде: 

    *,html {
    margin: 0;
    padding: 0;
    }

Это избавляет от многих несоответствий рендеринга между браузерами (т. Е. IE) и дополнительного CSS, необходимого для обеспечения отступов / полей, где это фактически необходимо, как правило, минимально. С этим правилом «сброса» в IE блоки выстраиваются в линию (проверено 6 и 7), хотя проблемы с различными размерами шрифтов по умолчанию остаются:

альтернативный текст http://www.mikrogroove.com/stackoverflow/textbox_selectbox_alignment.gif

2 голосов
/ 08 апреля 2009

Я попробовал следующий код. Это идеально сочетается при тестировании в IE7. 

<input type="text">

<select>
  <option>option1</option>
  <option>option2</option>
</select>

Я предполагаю, что некоторые стили CSS из родительских элементов (body, form, родительские классы) применяются к одному или обоим этим элементам, но без просмотра исходного кода об этом трудно судить.

0 голосов
/ 08 апреля 2009

Я бы посоветовал поместить вашу форму в какую-нибудь окружающую разметку. Я обычно использую списки определений, поэтому разметка будет выглядеть примерно так: 

<dl>
    <dt>
        <label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label>
    </dt>
    <dd>
        <input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" />
    </dd>
    <dt style="display: none;">
        <label for="ctl00_main_acceptedDomainsDropDownList">Accepted Domains</label>
    </dt>
    <dd>
        <select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList">
            <option value="exchange.samcogan.com">exchange.samcogan.com</option>
            <option value="doamin1.com">domain1.com</option>
            <option value="domain2.com">domain2.com</option>
            <option value="domain3.com">domain3.com</option>
        </select>
    </dt>
</dl>

Затем вы можете перемещать / размещать элементы dt и dd, чтобы они появлялись в одной горизонтальной строке.

Этот подход, независимо от того, используете ли вы dl, ul или другое, дает лучшее позиционирование в целом.

0 голосов
/ 08 апреля 2009

Использование таблицы для макета может помочь

...