html - 在 IE8 中选择底部对齐的 html 文本

Question

我申请了

select{
  line-height: 30px;
  height: 30px;
}

到一个html选择框。除了这个 IE8 之外的每个浏览器都将选择框内的文本垂直居中对齐(参见 1 )。我不知道该怎么做才能解决这个问题。我已经在 stackoverflow 上阅读了很多类似问题的答案，并尝试了 box-sizing 和 padding 属性，但没有成功。!

here is what the errorneous layout in IE8 looks like

Answer 1

很简单，我发现如果你只应用 padding 来给 select 元素的高度和垂直对齐你可以实现跨浏览器的解决方案，即使是这样的IE8，仅使用 padding:

请看我的pen

由于 Codepen 不支持 IE8，请将我的笔导出为 zip 并在本地查看文件，要么模拟 IE8，要么在某处使用 IE8 的正版安装。

或者只是复制下面的代码并创建您自己的 .html 文件

HTML

<select name='options'>
  <option value='option-1'>Option 1 that could be fairly long</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

CSS

select {
  padding: 8px;
}