談一談瀏覽器兼容問題

瀏覽器兼容問題

一、什麼是瀏覽器兼容

所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。

二、瀏覽器兼容產生的緣由

由於不一樣瀏覽器使用內核及所支持的HTML等網頁語言標準不一樣；

以及用戶客戶端的環境不一樣（如分辨率不一樣）形成的顯示效果不能達到理想效果。

最多見的問題就是網頁元素位置混亂，錯位。

三、瀏覽器兼容問題以及怎麼解決

3.一、不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣

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

解決方案：CSS裏 *{margin:0;padding:0;}

3.二、塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大

問題症狀:常見症狀是IE6中後面的一塊被頂到下一行

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性

3.三、設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

3.四、行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug

問題症狀：IE6裏的間距比超過設置的間距

解決方案：在display:block;後面加入display:inline;display:table;

3.五、圖片默認有間距

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

解決方案：使用float屬性爲img佈局 （個人一個學生使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此我禁止他們使用）

3.六、標籤最低高度設置min-height不兼容

問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容

解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

3.七、居中問題

問題症狀：div裏的內容，IE默認爲居中，而FF默認爲左對齊

解決方案：能夠嘗試增長代碼margin: 0 auto;

3.八、margin加倍的問題

問題症狀：設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。

解決方案：在這個div裏面加上 display:inline;

3.九、IE捉迷藏的問題

問題症狀：當div應用複雜的時候每一個欄中又有一些連接，這個時候容易發生捉迷藏的問題。 有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。

解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構儘可能簡單。

以上是常見的瀏覽器兼容問題，還有不少，能夠本身去網上看！

四、瀏覽器內核

4.一、Trident（IE內核）

4.二、Gecko(Firefox內核)

4.三、Webkit（谷歌、Safari、360極速瀏覽器以及搜狗高速瀏覽器）

WebKit內核常見的瀏覽器：傲遊瀏覽器三、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器

4.四、Presto(Opera前內核) (已廢棄)

五、seo 搜索引擎優化

很早之前搜索引擎優化百度百度專門給技術人員提供優化方案，是一本白皮書。

搜索引擎工做原理

一、抓取網頁。每一個獨立的搜索引擎都有本身的網頁抓取程序爬蟲（spider）。爬蟲Spider順着網頁中的超連接，從這個網站爬到另外一個網站，經過超連接分析連續訪問抓取更多網頁。被抓取的網頁被稱之爲網頁快照。因爲互聯網中超連接的應用很廣泛，理論上，從必定範圍的網頁出發，就能蒐集到絕大多數的網頁。

二、處理網頁。搜索引擎抓到網頁後，還要作大量的預處理工做，才能提供檢索服務。其中，最重要的就是提取關鍵詞，創建索引庫和索引。其餘還包括去除重複網頁、分詞（中文）、判斷網頁類型、分析超連接、計算網頁的重要度/豐富度等。

三、提供檢索服務。用戶輸入關鍵詞進行檢索，搜索引擎從索引數據庫中找到匹配該關鍵詞的網頁；爲了用戶便於判斷，除了網頁標題和URL外，還會提供一段來自網頁的摘要以及其餘信息。

http://www.cnblogs.com/EnSnai...

六、yahoo軍規

14條 http://www.cnblogs.com/Yellow...

35條 http://www.cnblogs.com/xianyu...