html select的文本在IE8中底部對齊

Question

我申請了

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

到html選擇框。 除此IE8之外的每個瀏覽器都將選擇框內的文本垂直居中對齊（請參見1 ）。 我不知道該怎么做才能解決此問題。 我已經在stackoverflow上閱讀了許多類似問題的答案，並且使用了box-sizing和padding屬性，但是沒有成功。

這是IE8中錯誤的布局的樣子

Answer 1

很簡單，我發現是，如果你只適用padding給予的高度，只是選擇元素的垂直對齊方式就可以實現一個跨瀏覽器的解決方案，即使是IE8的喜歡，只使用padding ：

請看我的筆

由於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;
}

Answer 2

僅應用針對IE8瀏覽器的條件CSS樣式。

<!--[if IE 8]>
<link href="styles/IE8.css" type="text/css" rel="stylesheet">
<![endif]-->

在我看來，可以通過擺弄line-height本身來解決此問題。

Answer 3

嘗試這個..

<div class="styled-select">
<select>
  <option>Here is the first option</option>
  <option>The second option</option>
</select>
</div>

.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}