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