這篇文章主要講解了“IE6有哪些常見CSS解析Bug”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“IE6有哪些常見CSS解析Bug”吧!
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì),負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作,以確保網(wǎng)站外觀精美、成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)易于使用并且具有良好的響應(yīng)性。
1.默認(rèn)高度(IE6) 描述:在IE6及以下版本中,部分塊元素?fù)碛心J(rèn)高度(在16px左右;) hack1:給元素添加聲明:font-size:0; hack2:給元素添加聲明:overflow:hidden; 2.圖片有邊框BUG ,當(dāng)圖片加在IE上會(huì)出現(xiàn)邊框Hack:給圖片加border:0;或者border:none; 3.圖片間隙 ,div中的圖片間隙BUG 描述:在div中插入圖片時(shí),圖片會(huì)將div下方撐大大約三像素。 hack1:將與寫在一行上; ie6 hack2:將轉(zhuǎn)為塊狀元素,給添加聲明:display:block; hack3:給圖片添加vertical-align:top/middle/bottom. 4. 雙倍浮向(雙倍邊距)(只有IE6出現(xiàn)) 描述:當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí),會(huì)錯(cuò)誤地把浮向邊邊界(margin)加倍顯示。 hack:給浮動(dòng)元素添加聲明:display:inline; 5.表單元素行高對(duì)齊不一致 描述:表單元素行高對(duì)齊方式不一致 hack:給表單元素添加聲明:float:left; 6.按鈕元素默認(rèn)大小不一 描述:各瀏覽器中按鈕元素大小不一致 hack1: 統(tǒng)一大小/(用a標(biāo)記模擬) hack2:input外邊套一個(gè)標(biāo)簽,在這個(gè)標(biāo)簽里寫按鈕的樣式,把input的邊框去掉。 hack3:如果這個(gè)按鈕是一個(gè)圖片,直接把圖片作為按鈕的背景圖即可 7.百分比bug 描述:在IE7及以下版本中在解析百分比時(shí),會(huì)按四舍五入方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況。(也會(huì)受系統(tǒng)影響) hack: 給右面的浮動(dòng)元素添加聲明:clear:right; 意思:清除右浮動(dòng)。 8.鼠標(biāo)指針bug 描述:cursor屬性的hand屬性值只有IE9以下瀏覽器識(shí)別,其它瀏覽器不識(shí)別該聲明,cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識(shí)別該聲明。 hack: 如統(tǒng)一某元素鼠標(biāo)指針形狀為手型,應(yīng)添加聲明:cursor:pointer; 9.透明屬性 兼容其他瀏覽器寫法:opacity:value;(value的取值范圍0-1; 例:opacity:0.5;) IE瀏覽器寫法:filter:alpha(opacity=value);取值范圍 0-100(整數(shù)) 10.li列表的BUG 1):當(dāng)父元素(li) 有float:left;子元素(a) 沒設(shè)置浮動(dòng)的情況下會(huì)出現(xiàn)垂直bug; Hack:給父元素li和子元素a都設(shè)置浮動(dòng); 2):當(dāng)給li中的a轉(zhuǎn)成block;并且有height,并有float的時(shí)候,li中沒設(shè)置浮動(dòng)會(huì)出現(xiàn)階梯顯示, hack:同時(shí)給li加float; 11.當(dāng)li里a、span 分別添加左右浮動(dòng)時(shí),并且li設(shè)置高度后,IE7及以下瀏覽器會(huì)出現(xiàn) li下方多出3像素左右的空隙; hack:給li添加float:left;和width:100%; 12.當(dāng)前元素(父元素里面第一個(gè)子元素)與父元素沒有設(shè)置任何浮動(dòng)的情況下,設(shè)置margin-top后,會(huì)錯(cuò)誤的把margin-top加在父級(jí)元素上。
Css hack: 1.給父級(jí)元素添加overflow:hidden;(推薦使用) 2.給父元素或者子元素加浮動(dòng) 3.當(dāng)父元素有邊框時(shí),可以直接給子元素添加margin-top值; 13.margin BUG 當(dāng)兩個(gè)上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他們中間的距離不會(huì)相加,而是會(huì)設(shè)置為較大的值; |
感謝各位的閱讀,以上就是“IE6有哪些常見CSS解析Bug”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)IE6有哪些常見CSS解析Bug這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
標(biāo)題名稱:IE6有哪些常見CSS解析Bug
URL鏈接:
http://weahome.cn/article/pdjdco.html