遇到的瀏覽器兼容問題及應對方法

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

正文：

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

　解決思路：用一個div覆蓋，讓用戶不能看到正常頁面呈現的內容

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

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

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

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

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

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

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

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

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

　實現方法：“

4.遇到問題：在ie11之前的版本，如果在標簽中，則會出現奇怪的藍色邊框

　實現方法：給加一個“border:0;”絕對立竿見影

5.遇到問題：因為是前臺首頁，所以寫了圖片滾動，ie10以下圖片莫名出現多余空隙

　實現方法：給加一句“display:block;”效果卓越

6.遇到問題：豎向顯示的文字用了“writing-mode:tb-rl;”但是在去朋友的電腦上調時發現居然在我心愛的FF上沒效果，不可能啊？？？然后發現是因為FF4及以下版本沒有實現這個屬性，這個屬性最初是　　　　　　由ie想出來的（老實說，我當時有點意外呢，畢竟ie在我心中是個孤僻的天才，屬于自己搞點小發明但是都屬于破壞向的，所以居然這么好用的屬性是被ie想出來的，而且FF居然要到了后來才　　　　　　實現，不得不說對于我是挺意外的）

　解決思路：沒法，有問題就得想辦法解決，那就只能一句一句的用ul li嵌套，然后向右浮動，設置定寬來實現了（老實說在用過writing-mode后這個方法很傻而且效果不好）

　實現方法：思路說了，那就直接上代碼。

//html部分

//這里的
是為了讓標點也能夠重起一行

 
天氣真好
，天氣真好
。
 
天氣真好
。
 
天氣真好
，天氣真好
。
 
天氣真好
？天氣真好
；
 
天氣真好
？

//css部分
ul{
 width: 6em;//em是一個相對單位，比px更好，1em = font-size的大小（如果沒有設置font-size則由繼承值決定）
 overflow: hidden;//保證布局不會崩掉
 list-style: none;//把默認樣式去除
}
ul li{
 float: right;//實現從右向左布局
 width: 1em;//定寬保證只顯示一個字
 margin-left: 0.2em;//保證每個li包含的內容之間有一定的間隔，能夠看清楚
 word-break:break-word;//告訴瀏覽器每個字后自動換行
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com