1)圖片有邊框BUG
o 當圖片加<a href="#"></a>在IE上會出現邊框
o Hack:給圖片加border:0;或者border:0 none;
2)圖片間隙
o div中的圖片間隙BUG
o 描述:在div中插入圖片時,圖片會將div下方撐大大約三像素。
o hack1:將</div>與<img>寫在一行上;
o hack2:將</div>轉為塊狀元素,給<img>添加聲明:display:block;
3) 雙倍浮向(雙倍邊距)(只有IE6出現)
o 描述:當Ie6及更低版本瀏覽器在解析浮動元素時,會錯誤地把浮向邊邊界(margin)加倍顯示。
o hack:給浮動元素添加聲明:display:inline;
4)默認高度(IE6、IE7)
o 描述:在IE6及以下版本中,部分塊元素擁有默認高度(在16px左右;)
o hack1:給元素添加聲明:font-size:0;
o hack2:給元素添加聲明:overflow:hidden;
5)表單元素對齊不一致
o 描述:表單元素行高對齊方式不一致
o hack:給表單元素添加聲明:float:left;
6)按鈕元素默認大小不一
o 描述:各瀏覽器中按鈕元素大小不一致
o hack1: 統一大小/(用a標記模擬)
o hack2:input外邊套一個標簽,在這個標簽里寫按鈕的樣式,把input的邊框去掉。
o hack3:如果這個按鈕是一個圖片,直接把圖片作為按鈕的背景圖即可。
7)鼠標指針bug
o 描述:cursor屬性的hand屬性值只有IE9以下瀏覽器識別,其它瀏覽器不識別該聲明,cursor屬性的pointer屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。
o hack: 如統一某元素鼠標指針形狀為手型,應添加聲明:cursor:pointer
8)透明屬性
o 兼容其他瀏覽器寫法:opacity:value;(value的取值范圍0-1; 例:opacity:0.5;)
o IE瀏覽器寫法:filter:alpha(opacity=value);取值范圍 1-100(整數)
更多關于“前端培訓”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學,課程大綱緊跟企業需求,更科學更嚴謹,每年培養泛IT人才近2萬人。不論你是零基礎還是想提升,都可以找到適合的班型,千鋒教育隨時歡迎你來試聽。