瀏覽器兼容【樣式在部分瀏覽器中正常顯示, 部分不正常顯示】

IE中錯誤顯示:

1.屬性之間的空格會使得界面出現錯誤 【如:<li   style=""></li>會識別成<li &nbsp;style=""></li>】 —— 多打了一個空格

2.<body>標籤

①body標籤中書寫的樣式,ie7中無法顯示

②body標籤中不能使用z-index:-1;(不能爲負數)

3.在使用絕對位置時,應將left:0px;等寫完整 否則ie7會出錯

4.清除浮動

     <ul><li style="float:left;"></li><li style="float:left;"></li><li style="float:left;"></li><li style="float:left;"></li><li style="float:left;"></li><div style="clear:both"></div></ul>
                <!--想要實現 在ie7中正常顯示 需要在ul後面加上以下內容-->
                <div style="clear:both"></div>
                <!--想要實現 在ie7中正常顯示 需要在ul後面加上以上內容-->
                <p></p>

5.ie7圖片下多餘空白

解決方案:設置“font-size:0;”

6.ie7、ie8中的input 內容會顯示在輸入框的頂端(無法居中)  

解決方案:添加line-height,並將其高度設爲文本框

7.ie 裏面margin:0 auto;失效  

解決方案:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

8.在ie8及以下背景圖片未成功顯示

    當寫backgound:url(xxx.png) center cener...;之類代碼時, png)後面需打上空格,否則背景圖片將無法在ie8及以下界面中顯示

IE6/Chrome/safari中錯誤顯示:

1.IE6/Chrome/safari背景圖片居中【background:url(xxx.png) center top;】圖像會出現1px偏移

①Chrome瀏覽器:多次對比就是當頁面寬度大於背景圖寬度且頁面寬度爲奇數時,內容區域向左偏移1px(這個就很沒節操只是偶爾顯現,大部分時間沒出現);當頁面寬度小於背景圖寬度且頁面寬度爲奇數時,內容區域向右偏移1px(這種現象是必現的)。

 ②IE6瀏覽器:只有當頁面寬度大於背景圖片寬度且頁面寬度爲奇數尺寸時纔會出現內容區域向左偏差1px的現象。

解決方案:
中間掏空的那種背景圖可以掏空的時候比內容區左右各少1px


IE正常,Firefox和Chrome無法正常顯示:

1.$(window).height()在firefox和chrome中獲取的是整個頁面的高度(body),IE中獲取的是當前可視窗口的高度

說明:

$(window).height()//獲取當前可視窗口的高度

解決方案:

將html頭部

<html>
換成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章