CSS實(shí)例:區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
因?yàn)镮E和Firefox對(duì)hr默認(rèn)的各種屬性margin,padding等等都不一樣,所以定義為0也沒(méi)用。
我們可以通過(guò)下面的CSS hack來(lái)解決:
不只是針對(duì)hr,這只是一個(gè)例子。IE6和IE7對(duì)hr邊距margin的解釋是一樣的,所以都定為8px,F(xiàn)irefox與IE有區(qū)別,下邊距只能為1px。
第一條IE6,IE7,F(xiàn)irefox都讀懂,這時(shí)候都是1px;第二條IE6,IE7能讀懂,都用第二條的8px覆蓋了第一條的1px,F(xiàn)irefox不懂,跳到分號(hào)以后的下一條,這時(shí)候IE6,IE7是8px,F(xiàn)F是1px;第三句IE6,IE7,F(xiàn)F都讀懂,因?yàn)镮E6本身的BUG,所以用第三條覆蓋了第二條,IE7因?yàn)榈诙䲢l的!important所以忽視第三條,F(xiàn)F同理忽視第三條。
這個(gè)時(shí)候,IE6看第三條,IE7看第二條,F(xiàn)F看第一條。雖然在這個(gè)例子里,第三條沒(méi)有必要,因?yàn)镮E6與IE7對(duì)hr的解釋是一樣的,但是這里是可以對(duì)三種瀏覽器版本賦予不同的值。
dUcky認(rèn)為最好的情況就是不用hack,只要寫(xiě)的規(guī)范,一般問(wèn)題不大,假如有一些差別的話,只要以IE作為第一瀏覽效果,F(xiàn)F稍微有點(diǎn)區(qū)別都沒(méi)關(guān)系,沒(méi)必要hack,不然維護(hù)起來(lái)很麻煩,當(dāng)然只是我的想法。
我們可以通過(guò)下面的CSS hack來(lái)解決:
示例代碼 [hl5o.cn]
hr.ducky{
margin-bottom:1px !important;
>margin-bottom:8px !important;
margin-bottom:8px
}
margin-bottom:1px !important;
>margin-bottom:8px !important;
margin-bottom:8px
}
不只是針對(duì)hr,這只是一個(gè)例子。IE6和IE7對(duì)hr邊距margin的解釋是一樣的,所以都定為8px,F(xiàn)irefox與IE有區(qū)別,下邊距只能為1px。
第一條IE6,IE7,F(xiàn)irefox都讀懂,這時(shí)候都是1px;第二條IE6,IE7能讀懂,都用第二條的8px覆蓋了第一條的1px,F(xiàn)irefox不懂,跳到分號(hào)以后的下一條,這時(shí)候IE6,IE7是8px,F(xiàn)F是1px;第三句IE6,IE7,F(xiàn)F都讀懂,因?yàn)镮E6本身的BUG,所以用第三條覆蓋了第二條,IE7因?yàn)榈诙䲢l的!important所以忽視第三條,F(xiàn)F同理忽視第三條。
這個(gè)時(shí)候,IE6看第三條,IE7看第二條,F(xiàn)F看第一條。雖然在這個(gè)例子里,第三條沒(méi)有必要,因?yàn)镮E6與IE7對(duì)hr的解釋是一樣的,但是這里是可以對(duì)三種瀏覽器版本賦予不同的值。
dUcky認(rèn)為最好的情況就是不用hack,只要寫(xiě)的規(guī)范,一般問(wèn)題不大,假如有一些差別的話,只要以IE作為第一瀏覽效果,F(xiàn)F稍微有點(diǎn)區(qū)別都沒(méi)關(guān)系,沒(méi)必要hack,不然維護(hù)起來(lái)很麻煩,當(dāng)然只是我的想法。
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大�。�
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DivCSS實(shí)例:一個(gè)效果很不錯(cuò)的CSS列表
- DIVCSS實(shí)例教程:蔚藍(lán)色的海洋漂亮的CSS縱向菜單
- DIVCSS實(shí)例:橙藍(lán)互換的CSS翻頁(yè)效果
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- DIVCSS菜單:超炫的菜單一張圖片實(shí)現(xiàn)鼠標(biāo)的兩種狀態(tài)及CSS當(dāng)前頁(yè)效果
- CSS實(shí)例:無(wú)懈可擊的CSS圓角技術(shù)!
- DIV CSS布局實(shí)例:半透明陰影效果的實(shí)現(xiàn)
- CSS基礎(chǔ)實(shí)例:CSS實(shí)現(xiàn)帶背景圖片的文字鏈接的方法
- 用css網(wǎng)站布局之十步實(shí)錄!(九)
- DIV CSS網(wǎng)頁(yè)布局分析的兩個(gè)小例子
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索CSS實(shí)例:區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack
- 教程說(shuō)明:
DIV+CSS實(shí)例-CSS實(shí)例:區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack
。