Question

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

在PC上，它可以在所有浏览器中呈现。
在Mac上，在Firefox中高度有效，但选择中的文字看起来过大（参见下面的第一张图片）。
在Chrome中的Mac上，高度设置不正确（请参阅下面的第二张图片）。

这是相关的CSS：

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

为什么我遇到这个问题？有没有办法重置或标准化浏览器和操作系统下拉列表的样式？

OSX，Firefox：

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

OSX，Chrome：

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

Answer 1

你应该研究CSS Resets。我根据应用程序谨慎使用它们，但在这种情况下，它们肯定会派上用场。

这是一个示例重置器：

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

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

2 个答案: