web前端關于瀏覽器兼容的一些知識和問題解決

caikeal 發布于2019-08-01 18:04 / 1750人閱讀

摘要：瀏覽器兼容產生的原因因為不同瀏覽器使用內核及所支持的等網頁語言標準不同。很早以前搜索引擎優化百度百度專門給技術人員提供優化方案，是一本白皮書。被抓取的網頁被稱之為網頁快照。

瀏覽器兼容 為什么產生瀏覽器兼容，瀏覽器兼容問題什么是瀏覽器兼容；

所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。

瀏覽器兼容產生的原因；

因為不同瀏覽器使用內核及所支持的HTML等網頁語言標準不同。

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

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

瀏覽器兼容問題以及怎么解決 ① . 不同瀏覽器的標簽默認的外補丁和內補丁不同

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

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

② . 塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大

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

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

③ . 設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度

問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度

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

④ . 行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

問題癥狀：IE6里的間距比超過設置的間距

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

⑤ . 圖片默認有間距

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

解決方案：使用float屬性為img布局（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

⑥ . 標簽最低高度設置min-height不兼容

問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

⑦ . 居中問題

問題癥狀：div里的內容，IE默認為居中，而FF默認為左對齊

解決方案：可以嘗試增加代碼margin: 0 auto;

⑧ . margin加倍的問題

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

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

⑨ . IE捉迷藏的問題

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

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

以上是常見的瀏覽器兼容問題，還有很多，可以自己去網上看！

瀏覽器內核

Trident（IE內核）

Gecko(Firefox內核)

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

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

>Presto(Opera前內核) (已廢棄)

seo 搜索引擎優化

搜索引擎百度排名搜索 ip pv

搜索引擎優化百度專門給技術提供優化方案白皮書百度競價收費

前端作業面的時候也會針對 seo 進行一系列優化

1 . 搜索引擎工作原理

當我們在輸入框中輸入關鍵詞，點擊搜索或查詢時，然后得到結果。深究其背后的故事，搜索引擎做了很多事情。

在搜索引擎網站，比如百度，在其后臺有一個非常龐大的數據庫，里面存儲了海量的關鍵詞，而每個關鍵詞又對應著很多網址，這些網址是百度程序從茫茫的互聯網上一點一點下載收集而來的，這些程序稱之為“搜索引擎蜘蛛”或“網絡爬蟲”。這些勤勞的“蜘蛛”每天在互聯網上爬行，從一個鏈接到另一個鏈接，下載其中的內容，進行分析提煉，找到其中的關鍵詞，如果“蜘蛛”認為關鍵詞在數據庫中沒有而對用戶是有用的便存入數據庫。反之，如果“蜘蛛”認為是垃圾信息或重復信息，就舍棄不要，繼續爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當用戶搜索時，就能檢索出與關鍵字相關的網址顯示給訪客。

一個關鍵詞對用多個網址，因此就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在“蜘蛛”抓取網頁內容，提煉關鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂。如果網站內容是flash和js，那么它是看不懂的，會犯迷糊，即使關鍵字再貼切也沒用。相應的，如果網站內容是它的語言，那么它便能看懂，它的語言即SEO。

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

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

2 . 搜索引擎工作原理

① . 抓取網頁。每個獨立的搜索引擎都有自己的網頁抓取程序爬蟲（spider）。爬蟲Spider順著網頁中的超鏈接，從這個網站爬到另一個網站，通過超鏈接分析連續訪問抓取更多網頁。被抓取的網頁被稱之為網頁快照。由于互聯網中超鏈接的應用很普遍，理論上，從一定范圍的網頁出發，就能搜集到絕大多數的網頁。

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

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

yahoo軍規

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

css hack

http://blog.csdn.net/freshlov...

（待續 ………… ）

GPU云服務器云服務器關于購買云主機和主機托管的常見問題 web前端和前端的區別解決webrtc兼容谷歌瀏覽器租用idc機房解決的問題和帶來的效益

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/51560.html

web前端關于瀏覽器兼容的一些知識和問題解決

摘要：瀏覽器兼容產生的原因因為不同瀏覽器使用內核及所支持的等網頁語言標準不同。很早以前搜索引擎優化百度百度專門給技術人員提供優化方案，是一本白皮書。被抓取的網頁被稱之為網頁快照。 showImg(https://segmentfault.com/img/bVY9Mu?w=383&h=194); 瀏覽器兼容為什么產生瀏覽器兼容，瀏覽器兼容問題什么是瀏覽器兼容；所謂的瀏覽器兼容性問題，是指...

daydream 2019-08-21 17:46 評論0 收藏0
web前端關于瀏覽器兼容的一些知識和問題解決

摘要：瀏覽器兼容產生的原因因為不同瀏覽器使用內核及所支持的等網頁語言標準不同。很早以前搜索引擎優化百度百度專門給技術人員提供優化方案，是一本白皮書。被抓取的網頁被稱之為網頁快照。 showImg(https://segmentfault.com/img/bVY9Mu?w=383&h=194); 瀏覽器兼容為什么產生瀏覽器兼容，瀏覽器兼容問題什么是瀏覽器兼容；所謂的瀏覽器兼容性問題，是指...

X1nFLY 2019-08-29 13:53 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
JavaScript文章

摘要：我對知乎前端相關問題的十問十答張鑫旭張鑫旭大神對知乎上經典的個前端問題的回答。作者對如何避免常見的錯誤，難以發現的問題，以及性能問題和不好的實踐給出了相應的建議。但并不是本身有問題，被標準定義的是極好的。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老...

mumumu 2019-08-22 13:50 評論0 收藏0