下拉菜单存在奇怪的浏览器/操作系统兼容性问题。具体来说，我正在尝试设置选择元素的高度以匹配它旁边的文本输入。
在 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
OSX、Chrome：
【问题讨论】：
标签： html css cross-platform cross-browser
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 */
}
【讨论】：
您应该查看 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 之间创建一个公平的竞争环境，并提供一个坚实的基础，您可以在此基础上明确声明您的意图
【讨论】：