html - 下拉框高度 : browser/OS compatibility issues

Question

下拉菜单存在奇怪的浏览器/操作系统兼容性问题。具体来说，我正在尝试设置 select 元素的高度以匹配旁边的文本输入。

• 在 PC 上，它在所有浏览器中都能正常呈现。

• 在 Mac 上，在 Firefox 中，高度有效，但选择中的文本似乎过大(请参见下面的第一张图片)。

• 在 Mac 上的 Chrome 中，高度根本没有正确设置(见下面的第二张图片)。

这是相关的 CSS:

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

知道我为什么会遇到这种情况吗？有没有一种方法可以跨浏览器和操作系统重置或标准化下拉菜单的样式？

OSX、火狐:

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

操作系统、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 */
}