背景
前幾天,參與公司專案的後臺管理員頁面的二次開發,在專案中遇到了些相容性問題,做個總結,記錄下此文件方便以後檢視,也歡迎大家提供更棒的解決方法哦。【ps:在專案中問題一個一個的暴露,有點小慌張】
問題
1、textarea在 "火狐" 瀏覽器的異樣現象
問題描述
在參與java web端開發時,發現在 “火狐” 瀏覽器中,textarea文字框的字型比input大,但是在其他瀏覽器中顯示正常,現象如下圖所示:
出現問題的原因是:原始碼中的reset.css重置樣式如下寫法:
解決方法
- 法一:
將上圖紫色標記句子刪掉,“火狐”中的字型大小就與input中的字型大小一致,但是字型型別又不一樣了
- 法二:
不刪除textarea的font-family樣式句子,直接設定textarea的font-size:14px,然後解決了此問題
ps:由於只有 "火狐" 瀏覽器出現此問題,我當時就懵了,平常自己引入reset.css時,都沒有過出現這個問題【此專案的reset.css是前輩引入的】,目前還不知道真正的問題所在。望大神指點哦。
推薦關於font-family的文章
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:後期遇到的相容性問題,都會在本文件中繼續更新補充。有更好的解決方法,歡迎留言】