web页面兼容性问题记录

背景

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

问题

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

问题描述

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

出现问题的缘由是：源码中的reset.css重置样式以下写法：

解决方法

• 法一：

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

• 法二：

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

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

推荐关于font-family的文章

• font-family的推荐写法

二、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相关文章

• 深刻分析line-height在浏览器中的特性以及最佳实践

• css行高line-height的一些深刻理解及应用

拓展知识点

• 禁止textarea调整大小

textarea{
	resize: none;
}
复制代码

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