DIV CSS 佈局教程網

前言：

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

正文：

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文件獲取屏幕寬度，然後再分別添加對應樣式

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

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

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

JavaScript Code復制內容到剪貼板

1. /*用於兼容ie8實現不同寬度窗口的響應式布局*/  
2. function getWidthHeight(){   
3.     var wWidth,wHeight;   
4.     //獲取窗口寬度   
5.     if(window.innerWidth){   
6.         wWidth = window.innerWidth;   
7.   
8.     }else if(document.body && document.body.clientWidth){   
9.         wWidth = document.body.clientWidth;   
10.     }   
11.     //獲取窗口高度   
12.     if(window.innerHeight){   
13.         wHeight = window.innerHeight;   
14.     }else if(document.body && document.body.clientHeight){   
15.         wHeight = document.body.clientHeight;   
16.     }   
17.     //通過深入Document內部對body進行檢測，獲取窗口大小   
18.     if(window.documentElement && window.documentElement.clientWidth && window.documentElement.clientHeight){   
19.         wWidth = window.documentElement.clientWidth;   
20.         wHeight = window.documentElement.clientHeight;   
21.     }   
22.   
23.     return {"wWidth":wWidth,"wHeight":wHeight};   
24. }   
25.   
26. $(document).ready(function(){   
27.     var wWidth = getWidthHeight().wWidth;   
28.     if(wWidth <= 900){   
29.         $("body").css("font-size","5px");   
30.     }else if(wWidth > 900 && wWidth < 1200){   
31.         $("body").css("font-size","8px");   
32.     }else if(wWidth > 1200){   
33.         $("body").css("font-size","10px");   
34.     }   
35. });  

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

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

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

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

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

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

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

XML/HTML Code復制內容到剪貼板

1. //html部分   
2. //這裡的<br>是為了讓標點也能夠重起一行   
3. <ul>  
4.         <li>天氣真好<br>，天氣真好<br>。</li>  
5.         <li>天氣真好<br>。</li>  
6.         <li>天氣真好<br>，天氣真好<br>。</li>  
7.         <li>天氣真好<br>？天氣真好<br>；</li>  
8.         <li>天氣真好<br>？</li>  
9. </ul>  

XML/HTML Code復制內容到剪貼板

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

以上就是我調兼容性遇到的問題啦，以下就是我之前說的那兩類問題，即我能力有限所以遇到的問題，還有就是現存的沒有辦法解決的問題

一：這個問題歸根結底就兩字：浮動！（必須任性給它加粗加底線）不論是莫名其妙的這個div就跑到後面去啦；哎，你這個img跟著上面的導航的布局跑什麼跑；喂喂，這個p標簽怎麼這麼不負責任呢？和你一起的img都乖乖在下面呆著，你跑到上面這個div裡面的p標簽旁邊是要搞什麼，搞基嘛？好吧，我承認這個鍋說到底還是要自己背，因為浮動確實很強大，但是用不好會真的有很奇怪的結果出現。所以啊，好好看書吧，在這裡罵這些標簽或者浏覽器感覺它們也挺無辜的。

二：（1）因為要異步加載文件進來，所以用到了JQuery的load方法，但是在谷歌浏覽器上面是禁止的，沒有辦法調但是換到服務器上就好了，同樣的還有360也是這樣的

（2）谷歌中不能設置font-size小於12px，這是谷歌的BUG存在挺久的了，雖然不知道為何要一直留著，大概覺得這樣很酷？在網上搜到一個解決辦法“-webkit-text-adjust:none;”但是我測試沒　　有成功，谷歌直接禁了，說是沒有這個東西。

後話：

最後，有一點我個人的小感受，實踐確實會學到很多知識，而且沒有看書那麼枯燥，但是這些知識會很散漫，所以看書這樣系統的學習依然是必須的，所以之後會努力結合好兩者，希望能有更多的進步吧。還有還有對於ie的一點小小感悟：因為ie很個性，浏覽器實現裡面特別愛特立獨行，所以我之前特別討厭ie，覺得大概是一群仗著自己很6就不把別人放眼裡的天才家伙們，但是現在發現ie其實確實就我個人而言是背鍋小天使，它本身對於前端的實現很有想法，很多細致的地方做得很棒，而且對於前端技術的發展也很有前瞻性，所以之前之所以會不住的罵它也是因為自己的無知吧，畢竟作為天才總是有一些不同於常人的脾氣才能彰顯它作為天才這個事實吧。我不會再毫無理由的罵它了，不過還是真心希望它能夠在未來的某天，不要如此折磨我們可愛的前端程序猿了:-)

以上這篇關於遇到的浏覽器兼容問題及應對方法(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。