высота выпадающего списка: проблемы совместимости браузера / ОС

Question

Странная проблема совместимости браузера и ОС с выпадающими списками. В частности, я пытаюсь установить высоту элемента select, чтобы он соответствовал текстовому вводу рядом с ним.

• На ПК он хорошо отрисовывается во всех браузерах.

• На Mac в Firefox высота работает, но текст в выделенном фрагменте кажется слишком большим (см. Первое изображение ниже).

• На Mac в Chrome высота вообще не установлена ​​должным образом (см. Второе изображение ниже).

Вот соответствующий CSS:

form select {
    float: left;
    height: 40px;
    font-size: 22px;
    padding-top: 4px;
}

Есть идеи, почему я это переживаю? Есть ли способ сбросить или стандартизировать стили выпадающих в разных браузерах и ОС?

OSX, Firefox:

http://i.stack.imgur.com/PyhMo.png

OSX, Chrome:

http://i.stack.imgur.com/rwbVX.png

Answer 1

Normalize.css аналогичен ответу AlienWebguy, но использует более разумный набор значений по умолчанию. Их код для форм:

/* =============================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7
 */

form {
    margin: 0;
}

/*
 * Define consistent margin and padding
 */

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects alignment displayed oddly in IE6/7
 */

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
 * 2. Corrects inner spacing displayed oddly in IE6/7
 */

button,
input {
    line-height: normal; /* 1 */
    *overflow: visible;  /* 2 */
}

/*
 * Corrects overlap and whitespace issue for buttons and inputs in IE6/7
 * Known issue: reintroduces inner spacing
 */

table button,
table input {
    *overflow: auto;
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 */

button,
html input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
}

/*
 * Addresses box sizing set to content-box in IE8/9
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Corrects inner padding displayed oddly in S5, Chrome on OSX
 */

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Corrects inner padding and border displayed oddly in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

Answer 2

Вы должны посмотреть на CSS Reset.Я использую их экономно в зависимости от приложения, но в подобных ситуациях они, безусловно, пригодятся.

Вот пример устройства сброса:

html{
    color:#000;
    background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset, img {
    border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style:normal;
    font-weight:normal;
}
li {
    list-style:none;
}
caption, th {
    text-align:left;
}
h1, h2, h3, h4, h5, h6 {
    font-size:100%;
    font-weight:normal;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border:0;
    font-variant:normal;
}
sup {
    vertical-align:text-top;
}
sub {
    vertical-align:text-bottom;
}
input, textarea, select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}
input, textarea, select {
    *font-size:100%;
}
legend {
    color:#000;
}

Сброс CSS удаляет и нейтрализует противоречивые значения по умолчанию.стилизация элементов HTML, создание ровного игрового поля в браузерах класса А и обеспечение надежной основы, на которой вы можете явно заявить о своих намерениях