日常浏览器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%;即可以解决。

原文地址:https://www.cnblogs.com/RoadAspenBK/p/7453903.html