ie8下input文字偏上select文字偏下

时间:2021-04-13 20:41:21

1、ie8下input文字偏上

正常情况下input的显示情况如下

ie8下input文字偏上select文字偏下

当设置input的高度时,就会出现文字不垂直居中偏上的情况,如图

ie8下input文字偏上select文字偏下

解决方案

强input的行高line-height与其高度设置一致

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

显示效果如图所示

ie8下input文字偏上select文字偏下

2、ie8下select文字偏下

正常情况下select的显示情况如下

ie8下input文字偏上select文字偏下

设置高度之后,文字不垂直居中,文字偏下,显示效果如下

ie8下input文字偏上select文字偏下

解决方案,根据select的高度,设置padding(padding = (height-20)/2)

select{
height:30px;
padding:5px;
}

显示效果如下

ie8下input文字偏上select文字偏下