日常浏览器bug解决及汇总

Bug如下，不定期添加遇到的新bug

2017-8-30添加

 

1、提交按钮用input type="submit" ,且没有设置value值的情况下，火狐浏览器显示为 "提交查询"，其他浏览器暂时默认为 ”提交“ bug;

原因：浏览器默认样式文本不同；

解决方法：统一设定value值为   "提交" ，可以将浏览器默认的文本显示覆盖。

 

2、select 下拉框，在没有设定根元素font-size大小的情况下，引入框架样式设置高度为3rem，在chrome下显示高度为36（1（边框）+5（内边距）+24（内容）+5+1）px，在火狐下显示为24（1+5+12+5+1）px，内容显示不全，造成显示bug。

原因：浏览器的默认字体大小不同；

解决方法：①给selsect 添加一个height：36px；将框架引入的样式覆盖。②设置跟元素文字大小 font-size：12px；将默认字体大小统一。

3、ie8下浏览器页面出现一圈灰色边框。

原因：ie8浏览器自带边框。

解决方法：

4、ie8下 input内容不垂直居中。ie浏览器下的input和select里面的文字就不会根据高度自适应上下居中

原因：ie8下光标总是停留在input的上边框处。

解决方法：将input 的 line-height 值设置为和height值相同，就可以解决。

5、ie8下 select内容不垂直居中。ie浏览器下的input和select里面的文字就不会根据高度自适应上下居中

原因：ie8下select 默认选中的项总是停留在select的下边框处。

解决方法：设置line-height 和height 相同没效果。好的方法是设置padding：10px 0；会导致右边的下拉按钮也随着变小。不过不影响。

6、给table添加dispaly：block之后宽度变为充满整行，但是内部的tr却依旧是之前的宽度，未充满整行。

原因：暂未知。

解决方法：给table设置width：100%；即可以解决。