javascript 開發(fā)之網(wǎng)頁兼容各種瀏覽器
javascript 開發(fā)之網(wǎng)頁兼容各種瀏覽器
前言:
關(guān)于CSS對各個瀏覽器兼容已經(jīng)是老生常談的問題了, 網(wǎng)絡(luò)上的教程遍地都是.以下內(nèi)容沒有太多新穎, 純屬個人總結(jié), 希望能對初學(xué)者有一定的幫助.
一、CSS HACK
以下兩種方法幾乎能解決現(xiàn)今所有HACK.
1, !important
隨著IE7對!important的支持, !important 方法現(xiàn)在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
<style> #wrapper { width: 100px!important; width: 80px; } </style>
2, IE6/IE77對FireFox
*+html 與 *html 是IE特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽.
<style> #wrapper { #wrapper { width: 120px; } *html #wrapper { width: 80px;} *+html #wrapper { width: 60px;} } </style>
注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、萬能 float 閉合(非常重要!)
關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽.
<style> .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} </style>
三、其他兼容技巧(再次啰嗦)
1, FF下給 div 設(shè)置 padding 后會導(dǎo)致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題.
1).垂直居中.將 line-height 設(shè)置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內(nèi)容不要換行.)
2).水平居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標簽)
4, FF 和 IE 對 BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題.
5, ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標簽和內(nèi)容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應(yīng).
7, 關(guān)于手形光標. cursor: pointer. 而hand 只適用于 IE.
P.S 至于IE5以及其他瀏覽器就沒有必要兼顧了. 在這上面花時間不值得.
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
一個超簡單的jQuery回調(diào)函數(shù)例子(分享)
下面小編就為大家?guī)硪黄粋€超簡單的jQuery回調(diào)函數(shù)例子(分享) 。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08如何使用PHP+jQuery+MySQL實現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
ECharts地圖主要用于地理區(qū)域數(shù)據(jù)的可視化,展示不同區(qū)域的數(shù)據(jù)分布信息,通過本文給大家介紹如何使用PHP+jQuery+MySQL實現(xiàn)異步加載ECharts地圖數(shù)據(jù),需要的朋友參考下吧2016-02-02jQuery+css實現(xiàn)的藍色水平二級導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery+css實現(xiàn)的藍色水平二級導(dǎo)航菜單效果代碼,通過簡單的jQuery操作鼠標事件實現(xiàn)頁面元素樣式的切換功能,非常美觀大方,需要的朋友可以參考下2015-09-09在JavaScript的jQuery庫中操作AJAX的方法講解
這篇文章主要介紹了在JavaScript的jQuery庫中操作AJAX的方法講解,包括利用jQuery簡化Ajax開發(fā)部分的內(nèi)容,需要的朋友可以參考下2015-08-08jQuery 常用特效實例小結(jié)【顯示與隱藏、淡入淡出、滑動、動畫等】
這篇文章主要介紹了jQuery 常用特效,結(jié)合實例形式總結(jié)分析了jquery顯示與隱藏、淡入淡出、滑動、動畫等常用特效實現(xiàn)技巧,需要的朋友可以參考下2020-05-05ThinkPHP+jquery實現(xiàn)“加載更多”功能代碼
本篇文章主要介紹了ThinkPHP+jquery實現(xiàn)“加載更多”功能代碼,以實例代碼講訴了加載更多的代碼實現(xiàn),非常具有實用價值,需要的朋友可以參考下2017-03-03