相容新問題

2021-07-25 11:54:07 字數 1353 閱讀 3382

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段**有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的**或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。

在學習瀏覽器相容性之前,我想把前端開發人員劃分為兩類:

第一類是精確按照設計圖開發的前端開發人員,可以說是精確到1px的,他們很容易就會發現設計圖的不足,並且在很少的情況下會碰到瀏覽器的相容性問題,而這些問題往往都死瀏覽器的bug,並且他們製作的頁面後期易維護,**重用問題少,可以說是比較牢固放心的**。

第二類是基本按照設計圖來開發的前端開發人員,很多細枝末節差距很大,不如間距,行高,位置等等經常會差幾px。某種效果的實現也是反覆除錯得到,具體為什麼出現這種效果還模模糊糊,整體布局十分脆弱。稍有改動就亂七八糟。**為什麼這麼寫還不知所以然。這類開發人員往往經常為相容性問題所困。修改好了這個瀏覽器又亂了另乙個瀏覽器。改來改去也毫無頭緒。其實他們碰到的相容性問題大部分不應該歸咎於瀏覽器,而是他們的技術本身了。

瀏覽器相容問題一:不同瀏覽器的標籤預設的外補丁和內補丁不同

問題症狀:隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。

碰到頻率:100%

解決方案:css裡    *

備註:這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。

瀏覽器相容問題二:預設有間距

問題症狀:幾個img標籤放在一起的時候,有些瀏覽器會有預設的間距,加了問題一中提到的萬用字元也不起作用。

碰到機率:20%

解決方案:使用float屬性為img布局

備註:因為img標籤是行內屬性標籤,所以只要不超出容器寬度,img標籤都會排在一行裡,但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。(我的乙個學生使用負margin,雖然能解決,但負margin本身就是容易引起瀏覽器相容問題的用法,所以我禁止他們使用)

瀏覽器相容問題三:背景的相容問題。

現在的背景有各種各樣的css屬性 但大部分ie8都是不相容的 。 可以把背景用div包裝起來  然後用 position:absolute,z-index:-1方式來設定它。

瀏覽器相容問題四:ie瀏覽器的hack方法

瀏覽器相容問題五:

hcharts更新問題

顯示 hcharts的顯示這裡就不多說了,基本官網上的例子都有 需要說明一點的是,在柱狀圖中表示時,可以使用座標的方式指定表示的橫座標,而不是只能像官網上一樣全部寫完 data可以寫成 1,5 2,8 其中1代表橫座標,5代表縱座標 更新 hcharts更新時series不會自動增加或減少,需要我們...

pip更新問題

更新命令 requirement already up to date 在pycharm的虛擬環境中,特別容易出現執行更新pip的命令後,提示要求己經更新,但實際上檢視版本還是沒更新成功的情況 直接使用pip install upgrade pip 這簡直是死迴圈了,使用python m pip i...

angular 重新整理問題

從列表頁進入詳情頁,需要傳遞引數,列表頁使用 state.go inbox 詳情頁使用 stateparams.id獲取引數 1.第一種使用寫法 stateprovider state inbox controller urlcontroller template 對你有乙個問題是,到詳情頁後,如果...