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

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

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

3 个答案: