我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要外形CSS属性的支持，打造全兼容select,需要的朋友可以参考下
在网页开发中，`<select>` 标签用于创建下拉列表，但不同的浏览器对它的渲染方式可能存在差异，导致在视觉效果上不统一。为了确保跨浏览器的兼容性，我们需要对 `<select>` 的样式进行适当的预设。本文将探讨如何通过CSS属性来实现全兼容的 `select` 选择框。
我们注意到IE6、IE7、IE8、IE9、Firefox（FF）、Chrome（Ch）和Safari（SF）等浏览器对 `select` 的高度、内边距（padding）以及行高（line-height）的支持情况有所不同。IE6的默认高度固定为22px，不受CSS设置影响，而其他浏览器则基本支持高度设置。在研究中，我们尝试了不同组合，如设置 `height`、`padding` 和 `line-height`，并观察在各种浏览器中的表现。
通过实验，我们可以得出以下结论：
1. 文字垂直居中：在所有浏览器中，只有IE6不能通过CSS属性使文字垂直居中。
2. 高度设置：大部分浏览器（除了Safari）支持 `height` 属性，我们可以将 `select` 的高度统一设为22px。然而，Safari不响应 `height` 设置，但我们发现它支持 `line-height`，所以可以通过设置 `line-height: 22px` 来调整其高度。
3. 内边距：对于Firefox和IE9，需要设置 `padding` 来实现文字居中，例如 `padding: 2px 0`。然而，即使设置了 `padding`，在高度固定的情况下，浏览器并不会增加整体高度，这是一个需要注意的点。
基于以上研究，我们可以编写一个全兼容的CSS预设代码，如下所示：
```css
* {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
}
select {
height: 22px; /* 统一高度 */
line-height: 22px; /* 调整Safari的高度 */
padding: 2px 0; /* 使Firefox和IE9的文字居中 */
}
```
这个预设代码确保了在大多数现代浏览器以及较老的IE版本中，`select` 选择框的外观一致性。当然，这只是一个基础的预设，实际项目中可能还需要考虑更多细节，如边框样式、背景颜色、字体大小等，以达到更加一致和美观的效果。同时，由于浏览器的更新和新特性支持，开发者应该持续关注新的兼容性问题，并适时更新预设样式。
