下拉框高度：浏览器/操作系统兼容性问题

Question

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

• 在PC上，它在所有浏览器中呈现良好。

• 在Mac上，在Firefox中，高度起作用，但select中的文本看起来过大（请参见下面的第一张图片）。

• 在Chrome中的Mac上，根本没有正确设置高度（请参见下面的第二张图像）。

下面是相关的CSS：

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

任何想法，为什么我遇到这个？有没有办法重置或标准化跨浏览器和操作系统的下拉式样？

OSX，火狐：

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

OSX，铬：

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

Answer 1

你应该看看CSS重置。我谨慎使用它们，这取决于应用程序，但对于这样的情况，它们确实派上用场。

下面是一个例子，归零：

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元素的不一致的默认样式，跨A-grade browsers创造一个公平竞争的环境，并提供良好的基础，人们就可以明确声明你的意图

Answer 2

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 */ 
}