亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

IE兼容性BUG匯總

系統 2436 0

?


?? ? 1、png圖片在IE6下出現透明或背景變灰的bug;

分析: ?? ? 隨處可見,遇到時就想好策略。

解決方法: 1、使用濾鏡,語法如下

?? ? ? ? ? ? ? ? ? .image-style { background-image: none;

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?filter:progid: DXImageTransform .Microsoft. AlphaImageLoader (src="filename.png", sizingMethod="scale");

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

?? ? ? ? ? ? ? ? 注意:使用濾鏡需要性能損耗。

?? ? ? ? ? ? ?2、給IE6單獨制作一張.gif圖片,打上hack

?? ? ? ? ? ? ? ? ?.image-style{ background:transparent url("filename.png") no-repeat scroll 0 0;

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _background-image:url("filename.gif");

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

?? ? ? ? ? ? ? ? ?這種方法只需要在切圖時多存儲一份.gif格式的圖片,一般采用這種方法。

?? ?2、position:absolute定位在IE6下存在left和bottom相對最外層視窗(body)定位的bug:

分析: ??由于在IE6下,相對定位的元素沒有獲得IE內部的haslayout屬性,因此不創建新的定位上下文,所以絕對定位的元素相對于視口進行定位。

解決方法: 1、設置height:1%;//小的高度不會對實際高度找出影響

?? ? ? ? ? ? ?2、相對定位的祖先元素設置過高度和寬度。

?? ? ? ? ? ? ?3、相對定位的祖先元素設置_zoom:1,用于觸發元素的layout屬性。

3、IE6下border不顯示的bug

分析: 對一個div定義border,但是卻不顯示。

解決方法 :定義寬度;定義高度;清除浮動。

??4、在 W3C 規范中? position ?是可以使用在任何元素上的,但table元素的 position:relative 卻有例外:

?

        
          The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell,?
        
      
        
          and table-caption elements is undefined.

        
      

分析 :經測試,在瀏覽器(IE 除外)中給 table 定義 position:relative 屬性是無效的。如果的確需要在表格中使用該屬性,建議在單元格中嵌套一個 div 元素,再在其上設置 position:relative 屬性來模擬。

?5、IE6下overflow:hidden失效bug

分析 :在開發中經常使用overflow:hidden來清除浮動,也就是在浮動元素的父元素中使用這個屬性,就相當于添加了一個clear元素。但是,這在IE6下不給力。

解決方法 :只要在父元素中給定一個寬度就可解決這個bug;

6、IE6下的雙空白邊浮動bug

分析 :這是一個常見的出名BUG,給IE6下的浮動元素定義margin-left或者margin-right,實際上是數值的兩倍。

解決方法: 把這個浮動元素設置為display:inline;

7、IE6下float元素如果沒有定義寬度,在浮動時它會自動占滿一行的bug

分析:即使對這個浮動元素內部的元素設置了寬度,也是無效的

解決方法:一般用于布局的浮動元素不會要求橫向可自由拓展的,那么可以通過設置寬度來解決這個bug.

8、IE6下img元素底部留白的bug

分析 :代碼結構如下

?? ? ? ? <div>

?? ? ? ? ? ? ? ? ? <img src="filename" alt="圖片" />

?? ? ? ? </div>

解決方法 :把代碼結構改成如下:

?? ? ? ? ?<div><img src="filename" alt="圖片" /></div>

?? ? ? ? ? 并設置img元素的display:block(img元素默認是一個display:inline的元素)

9、IE6 7下的浮動元素的父元素在拖動滾動條時出現的邊框缺失bug

解決方法 :設置zoom,使元素獲得布局。

10、?IE(6 7 8) 的 z-index bug?

分析 :看代碼

xhtml:
< div? id ="container" >
< div? id ="box1" > 這個box應該在上面 </ div >
</ div >
< div? id ="box2" >
這個box應該在下面,IE瀏覽器會對定位元素產生一個新的stacking
context ,甚至當元素 z-index的為“auto”。
</ div >
css:
container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }

結果: ff/chrome顯示為box1在box2上,而IE確實box2顯示在了box1上

原因: IE瀏覽器會對定位的元素產生一個新的stacking context,并且從z-index:0開始

11、關于IE8的一些資料

12、IE6下的重復字符bug

分析: 如下圖所示

出現這個BUG的“機遇“其實并不大,要滿足以下一個或者多個條件:

1.父元素的內部有多個 浮動 元素。

2. 最后一個浮動元素前有隱藏元素:包括html 注釋 和display: none 的元素

3.子元素的寬度和父元素相同,父元素的寬度減去子元素寬度 小于3px

最終得出的結論是: 溢出文字的字數=注釋的條數 *2-1

這個變態BUG的最早文獻是出現在2004年, 這里可見

解決方法:

1.把浮動的子元素加上display:inline;屬性(推薦)

2.去掉注釋和所有隱藏元素(缺點:特殊情況下不一定可以刪除)

3.?把浮動的子元素加上margin-right:-3px;屬性(缺點:要加IE6的hack,也算是好方法)

4.在隱藏的DIV外嵌套一個DIV(缺點:增加的結果復雜性)

詳解: http://www.cnblogs.com/javashi/archive/2010/05/08/1730504.html

13、IE6下的空div bug

分析: 通常在實現可拓展的圓角框時,習慣在頭尾使用兩個空元素來放置背景圖片如<div class="hd"></div>,但是這個空元素在IE6下會莫名的產生一個高度,為原先定義的2倍。代碼如下:

        <div class="hd"></div>
<div class="bd">content</div>
<div class="ft"></div>
樣式:
 .hd{background:url("filename") transparent ...; height:5px;}

      

解決方法: 為這個空元素設定line-height:0;font-size:1px;即可解決這個bug。

14、IE6下對position:fixed不支持的bug

分析:問題的原因是IE6下的fixed元素絕對定位位置是針對html元素的,而滾動條則是針對body元素的

解決方法:

body{background-image:("xx.gif");}/*一張不存在的圖片*/
.fixed{_postion:absolute;expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight))}//底部
          
            expression(eval(document.documentElement.scrollTop));/*頭部*/
          
          
            
expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop-80));/*右側*/
          
        
        
      

15、IE6下input/textarea/select元素繼承父元素的水平margin的bug

分析: http://haslayout.net/css/Form-Control-Double-Margin-Bug

解決方法:這個bug在開發中是經常遇到的,解決方法就是在input或者textarea元素上使用負的margin,使元素重新布局。

16、IE6不支持min-height/max-height/min-width/max-width的bug

分析:無

解決方法:根據IE6的特性模擬出來

height:auto!important;
min-height: x px;
/* 需要的最小高度 */
height: x px

17、IE6下position:relative的bug

分析:在IE6下父層(或者上層)設置為position:relative且沒有寫寬度,而這個元素又被一個帶有滾動條overflow:auto/scroll屬性包含的時候,它將會表現出absulute,并且在鼠標移上去時,會在整個屏幕上滑動;

解決方法:找到了bug的原因后,事情就變得簡單了,方法有兩種

???????????? 1、把父層(或者更上層)的relative刪掉,但有時候這個relative是必須的,那就只能用第二種方法了;

???????????? 2、不刪除relative,但給這個元素設定一個寬度,可以是100%。

18、IE6下樣式不表現

分析:通常一個頁面需要載入2-3個樣式文件,但其中有某個樣式文件里的樣式完全不表現,你或許懷疑這個文件沒有被加載,這個時候打開IE Debug看文件的傳輸情況,很清晰的看到文件正常加載了,納悶吧!后來找到了

??????? 原因,主要有兩個:

??????? 1、這個文件的編碼和頁面定義的character編碼不一致;

??????? 2、不正確的注釋(這個也有可能是頁面編碼不正確,而注釋是中文導致的)

解決方法:檢查頁面編碼;去掉注釋;

19、IE6浮動元素與非浮動元素間隔的3pxbug

分析:在IE下,一個浮動元素與一個非浮動元素相鄰時候,中間會莫名的出現一個3px的間隔。

解決方法:1、由于明確知道是3px,所以可以使用負的margin,但是由于IE下不同的盒模式,又會導致寬度上的不同,浮動元素的寬度如果超出了父元素的寬度在IE下是會有bug的,所以不建議使用這種方法。

????????????? 2、不讓浮動元素和非浮動元素相鄰,或者把非浮動元素也設置為浮動元素。

20、IE6下img元素底部出現5px的空白間隙bug

分析:

??? 代碼結構如下:

< li >< a? href ="#" >< img? src ="xxx.png" ?alt ="xxx" ? /></ a ></ li >

?? 在ie6下會出現5px的空白。

解決方法:

1、
ul li
{ display : block ; font-size : 0 ; }
img
{ vertical-align : bottom ; }
2、img
{ _margin-bottom : -5px ; }

21、IE下透明度無效bug

分析:在IE的所有版本中,父元素設置了透明度,而子元素如果有position:relative/absolute時,子元素無法繼承父元素的透明度。

??????? 找了一些資料:http://younglab.blog.51cto.com/416652/431363

解決方法:除了資料中使用的方法(觸發layout),還有個土方法,那就是在透明度比較小的區域中,使用具有透明度的圖片和字體模糊。

22、IE下overflow:auto/scroll不起作用的bug

分析:在IE下overflow不起作用,但是在火狐下是正常顯示的,IE下overflow如同虛設,內容是表現出來了,但是確實在區域的下面顯示,滾動條也無法使用。

解決方法:對設置了overflow的元素設定高度和寬度(一般使用滾動條的都會設置這些屬性),然后給這個元素 進行position定位 ,relative或者absolute都是可以的

23、IE6 7 8下元素重疊bug

分析:頁面操作過程中對一組li元素做remove()或者hide()時,被移除的li的下一個兄弟元素會往下偏移,從而發生元素重疊。

解決方法:js中對這個li元素的父元素加上toggleClass("ie-hack");//ie-hack為不存在的class。
????????????? 原因不明。

24、IE6/7/8下直接對input輸入框使用背景圖片,當輸入值沖出背景圖片寬度時,背景圖片會隨字符滑動

解決方法:在input框外加一個div,在這個div上設置背景

25、去掉a鏈接難看外框的方法:

IE下設置hideFocus=true,其他瀏覽器設置:outline:none

<a href="..." hideFocus="true" title=".."/>
a
{
outline
: none
}
還有一種是用expression的方法,但是耗性能,原因是每秒鐘執行了很多次。不推薦是用
a{
blr:expression(this.onFocus=this.blue())
}

26、去除鏈接a點擊后產生的難看虛線框

a{text-decoration:none;color:#374257;blr:expression(this.onFocus=this.blur());}//IE
a:focus{outline:none;}//ff


?

IE兼容性BUG匯總


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 中文字幕一区二区三区有限公司 | 免费观看黄色a一级录像 | 在线播放国产一区二区三区 | 老师粗又长好猛好爽视频 | 四虎国产精品永免费 | 久久99精品久久久久久久野外 | 色爱综合网欧美 | 精品无码久久久久国产 | 99精品国产第一福利网站 | 日本一区二区中文字幕 | 免费a一级毛片在线播放 | 深夜视频在线免费 | 亚洲国产日韩欧美综合久久 | 免费一看一级毛片人 | 欧美3区 | 久久精品国产福利国产秒 | 精品煌色视频网站在线观看 | 亚洲日本中文 | 九七97影院理论片手机在线观看 | 国产精品久久影院 | 特一级男女性色大片 | 日韩在线 中文字幕 | youjizz欧美粗又大中国 | 夜夜爱夜夜做夜夜爽 | 欧美日韩免费大片 | 最新日本中文字幕 | 动漫精品欧美一区二区三区 | 国产成人综合亚洲亚洲欧美 | 色综合久久九月婷婷色综合 | 性欧美极品xxxx欧美一区二区 | 苦瓜se影院在线视频网站 | 久久思 | 国产精品第一区亚洲精品 | 四虎国产永久免费久久 | 亚洲视频国产视频 | 成人久久在线 | 一级特黄国产高清毛片97看片 | 天天曰夜夜操 | 中文字幕亚洲欧美 | 狠狠操.com| 四虎影院在线网址 |