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：後期遇到的兼容性問題，都會在本文檔中繼續更新補充。有更好的解決方法，歡迎留言】