IE6常見CSS解析Bug及hack-好程式設計師H5前端
1.預設高度(IE6)
描述:在IE6及以下版本中,部分塊元素擁有預設高度(在16px左右;) hack1:給元素新增宣告:font-size:0; hack2:給元素新增宣告:overflow:hidden; 2.圖片有邊框BUG ,當圖片加在IE上會出現邊框 Hack: 給圖片加 border:0; 或者 border:none;
3.圖片間隙 ,div中的圖片間隙BUG
描述:在div中插入圖片時,圖片會將div下方撐大大約三畫素。 hack1:將與寫在一行上; ie6 hack2:將轉為塊狀元素,給新增宣告:display:block; hack3:給圖片新增vertical-align:top/middle/bottom. 4. 雙倍浮向(雙倍邊距)(只有IE6出現) 描述:當Ie6及更低版本瀏覽器在解析浮動元素時,會錯誤地把浮向邊邊界(margin)加倍顯示。 hack:給浮動元素新增宣告:display:inline; 5.表單元素行高對齊不一致 描述:表單元素行高對齊方式不一致 hack:給表單元素新增宣告:float:left; 6.按鈕元素預設大小不一 描述:各瀏覽器中按鈕元素大小不一致 hack1: 統一大小/(用a標記模擬) hack2:input外邊套一個標籤,在這個標籤裡寫按鈕的樣式,把input的邊框去掉。 hack3:如果這個按鈕是一個圖片,直接把圖片作為按鈕的背景圖即可 7.百分比bug 描述:在IE7及以下版本中在解析百分比時,會按四捨五入方式計算從而導致50%加50%大於100%的情況。(也會受系統影響) hack: 給右面的浮動元素新增宣告:clear:right; 意思:清除右浮動。 8.滑鼠指標bug 描述:cursor屬性的hand屬性值只有IE9以下瀏覽器識別,其它瀏覽器不識別該宣告,cursor屬性的pointer屬性值IE6.0以上版本及其它核心瀏覽器都識別該宣告。 hack: 如統一某元素滑鼠指標形狀為手型,應新增宣告:cursor:pointer; 9.透明屬性 相容其他瀏覽器寫法:opacity:value;(value的取值範圍0-1; 例:opacity:0.5;) IE瀏覽器寫法:filter:alpha(opacity=value);取值範圍 0-100(整數) 10.li列表的BUG 1):當父元素(li) 有float:left;子元素(a) 沒設定浮動的情況下會出現垂直bug; Hack:給父元素li和子元素a都設定浮動; 2):當給li中的a轉成block;並且有height,並有float的時候,li中沒設定浮動會出現階梯顯示, hack:同時給li加float; 11.當li裡a、span 分別新增左右浮動時,並且li設定高度後,IE7及以下瀏覽器會出現 li下方多出3畫素左右的空隙; hack:給li新增float:left;和width:100%; 12.當前元素(父元素裡面第一個子元素)與父元素沒有設定任何浮動的情況下,設定margin-top後,會錯誤的把margin-top加在父級元素上。 Css hack: 1.給父級元素新增overflow:hidden;(推薦使用) 2.給父元素或者子元素加浮動 3.當父元素有邊框時,可以直接給子元素新增margin-top值; 13.margin BUG 當兩個上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他們中間的距離不會相加,而是會設定為較大的值; 本文轉載於:?gcg |
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2638947/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端教程分享HTML/CSS部分常見面試題程式設計師Web前端HTMLCSS面試題
- 好程式設計師web前端分享常見面試題程式設計師Web前端面試題
- 好程式設計師web前端教程分享Jquery常見面試題程式設計師Web前端jQuery面試題
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端分享CSS Bug、CSS Hack和Filter學習筆記程式設計師Web前端CSSFilter筆記
- 好程式設計師web前端分享CSS屬性組成及作用程式設計師Web前端CSS
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師web前端分享CSS元素型別程式設計師Web前端CSS型別
- 好程式設計師web前端分享CSS基礎篇程式設計師Web前端CSS
- 好程式設計師web前端培訓分享小白學web常見的問題程式設計師Web前端
- 好程式設計師web前端分享HTML5常見面試題集錦五程式設計師Web前端HTML面試題
- 好程式設計師web前端分享HTML5常見面試題集錦四程式設計師Web前端HTML面試題
- 好程式設計師web前端分享HTML5常見面試題集錦三程式設計師Web前端HTML面試題
- 好程式設計師web前端分享HTML5常見面試題集錦二程式設計師Web前端HTML面試題
- 好程式設計師web前端分享常見html5語義化標籤程式設計師Web前端HTML
- 好程式設計師Java教程分享XML常見面試題程式設計師JavaXML面試題
- 好程式設計師分享:Java面試題常見問題程式設計師Java面試題
- 好程式設計師web前端培訓分享怎樣學好css?程式設計師Web前端CSS
- 好程式設計師web前端分享css初始化程式碼程式設計師Web前端CSS
- 程式設計師遇到bug時常見的30種反應程式設計師
- 好程式設計師前端教程css對齊方案總結程式設計師前端CSS
- 好程式設計師前端教程CSS基礎知識點程式設計師前端CSS
- 好程式設計師web前端分享CSS3 漸變程式設計師Web前端CSSS3
- 好程式設計師web前端系列之css3動畫程式設計師Web前端CSSS3動畫
- 好程式設計師web前端分享主流CSS image比較程式設計師Web前端CSS
- 好程式設計師web前端技術分享css盒模型程式設計師Web前端CSS模型
- 好程式設計師web前端學習路線分享HTML5常見面試題程式設計師Web前端HTML面試題
- 好程式設計師web前端分享用JavaScript實現的5個常見函式程式設計師Web前端JavaScript函式
- 5年程式設計師面試,常見面試問題解析程式設計師面試
- 好程式設計師Web前端教程之React原理解析及最佳化技巧程式設計師Web前端React
- 好程式設計師Java教程分享:Java工程師常見面試題程式設計師Java工程師面試題
- 好程式設計師Java教程分享JavaScript常見面試題五程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題四程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題三程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題二程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題一程式設計師JavaScript面試題
- 好程式設計師分享JavaScript中8個常見的陷阱程式設計師JavaScript
- 好程式設計師分享ApacheSpark常見的三大誤解程式設計師ApacheSpark