前言：

上周天的時候有個學(xué)長找我?guī)兔ψ鋈龔堩撁妫驗闆]有數(shù)據(jù)交換之類的，只是單純的前端頁面，想著好久沒做東西， 看書都看煩了，所以就接了也當是練手。之前因為沒有系統(tǒng)的看書，所以其實很多問題都考慮的不全面，屬于知其然不知其所以然的狀態(tài)，雖然現(xiàn)在也還有很多要學(xué)的東西，但是知道自己的不足總比不知道強吧？而且這也算是一種進步？總之，遇到各種問題，然后我發(fā)現(xiàn)問題主要分為兩類，一：我自己知識點不夠所以不知道怎么解決的，這種問題大多求問度娘或者問大神是可以搞定的；二：屬于確實是現(xiàn)階段技術(shù)存在漏洞的，不論是還沒能實現(xiàn)的、實現(xiàn)了但存在歧義或沖突的皆在此列。而就我這次做的頁面我遇到最大的問題就是瀏覽器兼容性的問題，有了解決方法的就在此和大家分享，希望能夠拋磚引玉，我也能學(xué)到更多的知識，謝謝。

正文：

1.遇到問題：當前瀏覽器為ie7及以下版本

解決思路：用一個div覆蓋，讓用戶不能看到正常頁面呈現(xiàn)的內(nèi)容

實現(xiàn)方法：將正常是顯示內(nèi)容的div的display屬性設(shè)置為none，將覆蓋div的display屬性設(shè)置為block（PS：在其中可以加入瀏覽器下載鏈接，讓用戶盡快正常瀏覽頁面）

2.遇到問題：ie8中不能實現(xiàn)圓角，因為ie8不能很好的支持css3

解決思路：下載PIE使得ie8支持css3中的圓角

實現(xiàn)方法：這里的實現(xiàn)方法就不細說了，下載然后“behavior: url(path/PIE.htc);”把路徑更改了就能夠訪問了，說一下需要注意的幾點問題：

（1）這個引用一定要放在html文件里面，而且路徑也是相對于引用的html文件而言的，放在css文件里面不會有效果

（2）如果發(fā)現(xiàn)引用成功之后，需要圓角的對象消失了，不要方，去洗個澡出來就好了，親測

開玩笑的，我確實去洗了個澡但是并沒有出現(xiàn)，所以代碼出現(xiàn)BUG什么的，求神拜佛到底是沒用啊（攤手），從頭調(diào)了一遍，又去百度了一下，發(fā)現(xiàn)問題了，是因為z-index的緣故，但只　　設(shè)置一個z-index沒有效果，哦~原來它的position屬性不能是static即默認值，ok，設(shè)置position為relative就ok啦，完美的圓角在ie8就實現(xiàn)啦~（在此我真誠的感謝寫出PIE的工程師　　們確實是因為你們的努力才讓我如此輕松的實現(xiàn)了我想要的效果，康桑阿米達~）

3.遇到問題：依然是ie8，不能支持css3中的@media screen and (....)實現(xiàn)響應(yīng)式布局

解決思路：沒辦法，誰讓它是磨人的小妖精呢？（聳肩）單獨寫一個js文件獲取屏幕寬度，然后再分別添加對應(yīng)樣式

實現(xiàn)方法：“<!--[if lt ie9]><script type='text/javascript' src='path'></script> <![endif]-->”放在html中，然后在引入的js文件中實現(xiàn)就ok了。說一個期間遇到的痛苦的事情給大家樂一樂，我搞了半天，發(fā)現(xiàn)莫名其妙就是不行，去網(wǎng)上找了各個大神的代碼來，一一對照就是不行！怎么能不行呢，這是多么傷自尊的事情啊。然后發(fā)現(xiàn)，居然是因為在"ie9"和“>”之間多了一個空

（手動再見）。不過調(diào)出BUG之后那種成就感還是有的哈，就是知道是因為這個原因，有種“讓我想先殺自己100遍好了”的感覺。

js代碼貼在下面，其實原理很簡單。主要是其中有innerWidth和clientWidth的一些小區(qū)別，如果有疑問的話網(wǎng)上有很多大神的詳細解析可以搜來看看。

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表