談談網(wǎng)站制作過程中怎樣更好兼容瀏覽器的問題
網(wǎng)站在上線前需要進行多次重復的測試,其中有一個很重要的步驟就是對各大瀏覽器的兼容性測試,每個客戶使用的瀏覽器是不一樣的,所以需要測試網(wǎng)站瀏覽器的兼容性,例如那幾個常用的IE瀏覽器,360瀏覽器,火狐瀏覽器等要兼容。
如果一個網(wǎng)站無法保證這一點,那么不論是搜索引擎還是客戶都不會對這個網(wǎng)站友好的。因此務必要在建網(wǎng)站的時候做好網(wǎng)頁兼容性測試,確保網(wǎng)站可以運行順利。下面天水網(wǎng)站制作小編針對客戶端瀏覽器兼容性問題談談看法:
網(wǎng)站做好之后一般客戶要求都需要兼容很多瀏覽器,如果網(wǎng)站做出來之后不能夠兼容瀏覽器的話,當客戶在用這種瀏覽器進行訪問網(wǎng)站的時候一定會出現(xiàn)網(wǎng)站打開是變形的情況,如果關于網(wǎng)站兼容所有瀏覽器也會是設計師一個比較頭疼的事情。
市面上瀏覽器有上百種之多,然而我們在進行瀏覽器兼容性測試時不可以將所有的瀏覽器都測試一遍,那樣工作量是相當大的。我們只需選擇幾款主流的瀏覽器進行兼容測試即可。如IE瀏覽器、火狐瀏覽器、谷歌瀏覽器、蘋果(Apple)Safari、等幾款全球應用范圍最廣的瀏覽器進行測試。從理論上講,完美兼容所有瀏覽器所有版本的網(wǎng)頁設計,有可能存在,但為了兼容一些不常用的低版本瀏覽器,網(wǎng)頁設計師需要付出幾倍的努力去做瀏覽器的兼容調(diào)整工作。
常見的幾種網(wǎng)頁元素在瀏覽器中不兼容問題:
1、目標不居中
一般新手都愛出現(xiàn)這個問題,主要原因是對盒子模型不夠理解,如果發(fā)現(xiàn)你的頁面沒有居中,基本上有兩種情況:
a. 如果是在瀏覽器中沒有居中,就是沒盒子,就是要用一個大DIV把所有需要居中元素裝起來,然后給盒子一個css樣式margin:0 auto;
b. 如果想要盒子內(nèi)的元素居中,必須定義盒子的絕對寬度,然后給盒子一個CSS樣式text-align:center;
2、目標在不同瀏覽器上的位置不同
a. 首先不要去急著找hack,先看一下自己的代碼有沒有錯誤,DW里有一個“檢查瀏覽器兼容性”功能特別實用;
b. 然后,盡量讓目標的位置初始化,使之在所有瀏覽器都處在同一個位置,這個條件的前提是,不寫hack,最后再一個方位一個方位調(diào)整。
3、目標與目標之間距離在各個瀏覽器上的區(qū)別
a. 給其中一個目標加背景顏色;
b. 觀察背景色與另外一個目標的距離,查看是不是這個目標造成的距離問題
c. 如果不是上一個目標,那就給另外一個目標也加上背景顏色。
d. 這樣很容易判斷出那個目標造成的原因,就針對那個目標進行修改。
4、IE6兼容問題最多的一個,浮動問題
a. flaot浮動造成IE6下面雙倍邊距問題,這個最常見,也最好處理,解決方法:
只需要給這個DIV加一個樣式:display:inline;
b. 布局的時候經(jīng)常會遇到這種情況:發(fā)現(xiàn)有一個DIV浮動了,接下來的一個DIV本來是要在下面顯示的,結果跑上面去了,這種情況一般在FF下面會出現(xiàn)。
解決的辦法:清除浮動,在設置過浮動的那個DIV下面加一個DIV,給個樣式clear:both;如下
5、IE8兼容問題
ie8下兼容問題,這個最好處理,轉(zhuǎn)化成ie7兼容就可以。在頭部加如下一段代碼,然后只要在IE7下兼容了,IE8下面也就兼容了
6、 背景兼容問題
有的時候明明給一個DIV加了背景顏色或背景圖片,但是卻顯示不出來或者顯示不全。
解決辦法:首先,有可能是DIV沒有設置絕對高度。如果設置了寬度和高度還沒有效果,那么給DIV一個樣式display:block;(通常a:hover加背景的時候經(jīng)常遇到)。
另外,如果高度必須要設置成自動的話,那么就給DIV一個樣式overflow:hidden;
7、 IE7和Firefox兼容問題
很多朋友DIV+CSS的時候,會出現(xiàn),在IE的幾個瀏覽器下都好使,就是FF下有問題。
解決方法:height:100px;/*FF下顯示100的高*/ +height:120px;/*IE678下顯示120高*/
原理:FF不識別加過符號的屬性,而IE識別。
另外,天水網(wǎng)站制作公司小編強烈建議大家去更新自己用的瀏覽器版本,瀏覽器之所以會不斷推出新版本,肯定是新版本有各種可圈可點的好處和亮點,而且新版本的各種兼容性,拓展功能也更強,為了讓你瀏覽網(wǎng)頁的時候更舒適,請一定記得更新你的瀏覽器。當你瀏覽網(wǎng)頁時發(fā)生變形,不妨先看看是不是自己的瀏覽器版本太低。
相關熱詞搜索: 網(wǎng)站制作,瀏覽器,兼容