網頁相容性除錯

網頁相容性除錯-流程

寫作規範高質量的**出相容性問題的可能性較小。所以出了問題要考慮是否**結構不規範

相容性問題兩大原因：

不同解析度下的相容性除錯

不同瀏覽器下的相容性除錯

顯示器解析度和瀏覽器市場份額

瀏覽器分類

國際品牌瀏覽器

ie：ie6 7 8 9 10 11

chrom

firefox

safari

opera

瀏覽器核心

webkit(bink)：chrom，opera,safari,山寨牌所有極速版瀏覽器(應用最廣)

trident：ie瀏覽器，山寨牌所有相容版瀏覽器

gecko：firefox

網頁相容性除錯流程

注意：網頁必須有文件申明，否則容易出現相容性問題 ，尤其是ie

前提：網頁必須在高階瀏覽器下製作，例如chrome，

開發網頁時候，盡量固定頁面寬度（960px,980px(推薦),1000px,1200px....）

(如果不固定頁面寬度（彈性布局/響應式布局需要專門設計），當頁面內容複雜時，不同解析度下布局會錯位)

網頁製作完成後：

1：chrome下相容性除錯

不同解析度下相容性除錯

1：自己電腦解析度下網頁相容性

2：比我電腦更小的解析度下除錯

縮小瀏覽器寬度高度來模擬低解析度情況

如果變形，需要給元素設定固定寬、高、邊距等樣式

3：比我電腦更大的解析度下除錯

縮小瀏覽器上的網頁近似模擬高解析度情況

注意：只是近似模擬，不是完全相同

除錯結果僅用於測試網頁超大背景顏色和、網頁模組的居中布局情況

（縮小頁面除錯完成後記得回覆頁面比例：ctrl+0）

2：其他瀏覽器下相容性除錯

所謂其他瀏覽器，狹義指的就是 ie6,ie7,

1：使用chrome製作網頁

2：使用ie檢視網頁

先用本系統自帶ie檢視網頁

再按ie f12，切換ie不同版本檢視網頁（注意ie7）

再使用ietester軟體，模擬ie6檢視網頁

（下面步驟根據需要可做可不做）

如有必要，本機安裝虛擬機器（virtualpc），安裝xp系統，使用內建ie6除錯網頁

如有必要，再使用其他瀏覽器（國際、山寨）除錯網頁。

3:使用chrom做移動端除錯

相容性（空格相容性）

在chrome與firefox下顯示的寬度不同，原因是兩個瀏覽器的預設字型不同，給html規定字型即可解決。下面有各種形式的空格，各有不同 不換行空格，按下空格鍵所產生的空格，受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...

網頁相容性測試工具

謹以此文寫個給網頁設計師，程式設計師，或其他任何曾與多個瀏覽器的相容問題苦苦掙扎的人們。一年前，幾乎沒有好的測試 跨瀏覽器相容的工具。這些工具通常無論是在成本，功能，或所需時間都存在明顯的缺陷。可喜的是最近，有很多的新的工具參與到瀏覽器測試的世界，其中一些提供真正優質的服務。在此我們列出了目前跨瀏覽...

網頁相容性測試工具

expression web superpreview 加快了針對跨瀏覽器相容性除錯 這一主要任務的速度。利用 expression web superpreview，無需使用 web 服務便可在用於開發的計算機上除錯頁面。expression web superpreview 是一款獨立的視覺化除...