web页面兼容性问题记录前几天，参与公司项目的后台管理员页面的二次开发，在项目中遇到了些兼容性问题，做个总结，记录下此文

背景

前几天，参与公司项目的后台管理员页面的二次开发，在项目中遇到了些兼容性问题，做个总结，记录下此文档方便以后查看，也欢迎大家提供更棒的解决方法哦。【ps:在项目中问题一个一个的暴露，有点小慌张】

问题

1、textarea在 "火狐" 浏览器的异样现象

问题描述

在参与java web端开发时，发现在 “火狐” 浏览器中，textarea文本框的字体比input大，但是在其他浏览器中显示正常，现象如下图所示：

出现问题的原因是：源码中的reset.css重置样式如下写法：

解决方法

法一：

将上图紫色标记句子删掉，“火狐”中的字体大小就与input中的字体大小一致，但是字体类型又不一样了

法二：

不删除textarea的font-family样式句子，直接设置textarea的font-size:14px，然后解决了此问题

ps:由于只有 "火狐" 浏览器出现此问题，我当时就懵了，平常自己引入reset.css时，都没有过出现这个问题【此项目的reset.css是前辈引入的】，目前还不知道真正的问题所在。望大神指点哦。

2、line-height在 "火狐" 中的不垂直居中问题

堪称1px像素眼的产品【哈哈哈...】，揪出了我的web页面在“火狐”中，按钮的字体没有垂直居中的问题

问题描述：

同样的height：34px;line-height:34px;唯有“火狐”浏览器没有垂直居中，咋整？

我把line-height:34px修改成：line-height:30px;在火狐中显示垂直居中了，但是在其他浏览器...懂得了吧？无奈...

效果图如下：

解决方法：

修改成以下形式line-height的写法

line-height:1.5;

知识点拓展：line-height有5种定义方式

line-height有5种定义方式

1）div{line-height：nomal}  就是默认的形式，不太推荐这种方式，因为各个浏览器都不一样，会有差异，firefox大概是34px。oprea大概是30px。

2）div{line-height:inherit}  继承的方式，就是继承父级元素的形式，不定义的默认值，也不推荐这种方式。

3）div{line-height:150%}  百分比的形式，比较的灵活。

4）div{line-height：20px}  长度的形式，关于常见的一些CSS中的长度单位，后面我将讲述一下。

5）div{line-height:1.5}  纯数字的方式，我推荐的方式，能适应各种。

关于line-height相关文章

拓展知识点

禁止textarea调整大小

textarea{
	resize: none;
}

【ps：后期遇到的兼容性问题，都会在本文档中继续更新补充。有更好的解决方法，欢迎留言】

web页面兼容性问题记录

背景

问题