您現在的位置: 365建站網 > 365學習 > 12種Javascript解決常見瀏覽器兼容問題的方法

12種Javascript解決常見瀏覽器兼容問題的方法

文章來源:365jz.com     點擊數:1705    更新時間:2010-01-05 23:49   參與評論
   我們提倡盡可能使用CSS,而且我們常常能做到這一點?,F代瀏覽器有很好的CSS支持-這無疑足夠好讓你使用CSS來控制布局和版面設計。但是有時候,某些網頁元素在不同的瀏覽器會出現不同。

    如果你不知道原因,不要過于擔心,請研究CSS規則并查看這篇文章:使用CSS來修正一切: 20 +常見錯誤和修復。

如果這些也無效,您可以通過下面列出的12個JavaScript解決方案修復它,這樣您的網頁看起來就能跨越所有瀏覽器了!

在本文中,我們會揭開你在開發web應用是可能會遇到的12個最常見CSS問題的javascript解決方案。

1. 自動匹配高度

javascipt-自動匹配高度

自從我們拋棄了基于Table的頁面布局后,創建同等高度欄目或內容盒子的視覺效果已然是一個挑戰。

1.1 用jQuery設置匹配高度

這個jQuery插件在同一個容器里“平衡”盒子的高度并創造一個簡介的網格——幾乎從可用性和性能的角度使用簡單的JavaScript替代: equalHeights()函數測定一個容器里的所有同級元素同容器的高度,然后設置每個元素的最低高度為最高的元素的高度。

如何工作

equalHeights()通過循環測定指定元素的最高級別的子節點,然后設置他們的最小高度值為最高的元素的高度。

點擊這里預覽效果

1.2 用jQuery匹配欄目高度

jQuery的另一個可以使盒子的高度相等的插件

$(“#col1, #col2″).equalizeCols();

將如你所想的那樣匹配高度

$(“#col1, #col2″).equalizeCols(“p,p”);

匹配這兩卷,并在#col1或#col2(短的那個)里的P標簽后面添加空白.
2. IE6 PNG透明支持

IE6以下的版本不支持png透明。使用hack,IE 5.5和6也已經可以支持,但hack并不理想的且難以使用。讓我們來看看我們能做些什么來支持IE6用戶 ,同時為網站的大多數訪客帶來最佳的透明效果。

2.1 強制IE6支持透明

IE7的是一個Dean Edwards建立的JavaScript庫,以強迫MSIE(IE6,IE5)表現的像一個兼容標準的瀏覽器。它修復許多CSS問題并使透明PNG在IE6和IE5下正常工作,它還允許高級的CSS選擇器。

點擊查看預覽效果
點擊下載源文件

2.2. 改良iFixPng

javascript-IE6-透明圖片

修正IE6及以下的PNG圖片的問題,IMG標簽和CSS背景圖片都可以。這個插件是對原始iFixPng插件的一種改進。特點包括:圖像或有背景圖片的標簽,現在支持background-position,其中包括IE瀏覽器的絕對定位的修正。(bottom: -1px || bottom: 0px)

點擊查看預覽效果
點擊這里下載源文件

3. 用Javascript改變class

這是一個方便的JavaScript函數,可以在當前的文件的任何元素的class由oldClass改為newClass。這是特別有用的快速的利用CSS而不是用編碼改變風格。

function changeClass(oldClass, newClass) {
      var elements = document.getElementsByTagName(“*”);
      for( i = 0; i < elements.length; i++ ) {
            if( elements[i].className == oldClass ) elements[i].className = newClass;
      }
}

點擊查看預覽效果
點擊下載源文件

4. CSS瀏覽器選擇器

如果您可以只需鍵入一個特殊選擇器,在這里您可以寫一些JavaScript ,設置一個Class在基于當前的瀏覽器的名字的標簽會怎么樣?

javascript-css-選擇器

4.1 CSS Browser

這是一個非常小的javascript只有一行,而且不到1kb,它允許CSS選擇器。它讓您可以為每個操作系統和每個瀏覽器寫具體的CSS代碼。你可以寫一些JavaScript ,設置Class的名字,也就是說,內容根據當前的瀏覽器。

點擊查看預覽效果
點擊下載源文件

jQuery 瀏覽器選擇器

這里有另外一個基于jQuery的非常簡單的處理瀏覽器選擇器的方法,你需要做的只是加載jQuery庫文件,并添加下面的一塊兒代碼。

$(document).ready(function(){
$(‘HTML’).addClass($.browser);
});

現在你可以準備你的樣式,如.msie,.mozilla, .opera, .safari 或其它目標瀏覽器。

點擊查看預覽效果

5. 最小/最大 高度/寬度支持

針對CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 屬性,這里有一些很好的jQuery修正。

5.1 jQMinMax

這是一個為沒有原聲的支持min-width, max-width,min-height和max-height的地方添加支持的jQuery插件。

點擊查看預覽效果
點擊下載源文件

5.2 JSizes

這個小jQuery插件為CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 屬性添加支持。特別是他提供一種方法來確定一個元素在那里可見。由于所有的型號的方法返回數值,所以這些也可以安全的使用在嚴格的DOM元素方面。

jQuery(function($) {
     var myDiv = $(‘#myDiv’);

     // set margin-top to 100px and margin-bottom to 10em
     myDiv.margin({top: 100, bottom: ‘10em’});

     // displays the size of the top border in pixels
     alert(myDiv.border().top);

     // displays true if the element is visible, false otherwise
     alert(myDiv.isVisible());

     // set padding-right to 10px and margin-left to 15px using chaining
     myDiv.padding({right: 10}).margin({left: 15});
});

點擊查看預覽效果
點擊下載源文件

6. 元素垂直/水平居中

你可能之前遇到過這個問題:水平或垂直居中某個元素。垂直居中在CSS里面相當麻煩,特別是你想支持所有主流瀏覽器。

javascrpt-垂直居中

6.1 Center element plugin

這個插件可以使頁面中的所有元素居中,垂直和水平居中采用css負margin的方法。

$(“element”).center(); //vertical and horizontal
$(“element”).center({
horizontal: false // only vertical
});

點擊查看預覽效果
點擊下載源文件

6.2 我是怎么把一個元素垂直居中的?

在這個視頻教程里, Jeffrey Jordan Way將為你展示如何使用jQuery的力量結合CSS在你的瀏覽器里面使一個圖片垂直居中.

7. 在IE里使用Q標簽

人們期望使用的Q標簽而不是blockquote標簽來顯示引號。然而IE/Win不支持Q標簽,因為這一點,大部分網站的作者選擇不使用Q標簽。

7.1 QinIE

當你在你的文件的頭部添加這個腳本在IE瀏覽器里自動掃描的網頁Q的標記,并正確的顯示它們(包括嵌套引用) 。當(如果)IE瀏覽器將來支持Q標簽,這個插件將會添加瀏覽器版本檢查。

點擊下載源文件

8. 增加點擊目標的大小和獲得更多的響應轉換

javascript-js

通過把你的所有內容放到一個可點擊的標簽來和單調的“read more…”鏈接說拜拜吧。

點擊下載源文件

9. Lazy loader

Lazy loader 是一個jQuery。它可以延遲加載頁面里面的圖片. 在用戶瀏覽視界(頁面中可見部分)以外的圖片之前,它將不會被加載。這和image preloading的作用正好相反.

點擊查看預覽效果
點擊這里下載源文件

10. bgiframe

輕松的解決IE下的z-index的問題。

javascript-bgiframe

點擊查看預覽效果
點擊這里下載源文件

11. ieFixButtons

ieFixButtons 是一個修正IE6和7的<button>標簽的bug的jquery插件。

點擊查看預覽效果
點擊這里下載源文件

12. 溢出(overflow)修正

修正ie下的水平溢出。IE在溢出的元素里面顯示一個滾動條,特別是如果元素里面只有一行,滾動條就會遮住這行內容。這個插件通過修改padding來修正這個問題。

javascript-overflow-解決

點擊查看預覽效果
點擊這里下載源文件

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (1705人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 aⅤ变态另类天堂无码专区| 又污又爽又黄的网站| 波多野结衣办公室57分钟| o|dwoman中国老熟妇| 掀起衣服含着乳| 高挑美女被遭强高潮摸下面| 在线看片1788| 无码国产成人午夜电影在线观看| 公众面前强制强伦姧波多野结衣| 神马电影第九放映员院| 欧美人妻aⅴ中文字幕| 女性找鸭私密按摩播放| 浪潮av无码专区| 2020久久香蕉国产线看观看| 欧美高清不卡AAA片| >bootylicious| 老妇女性较大毛片| 欧美zooz人禽交| 免费两性的视频网站| 翁公在厨房和我猛烈撞击| 女被啪到深处喷水gif动态图| 亚洲成av人片在线观看无| 强奷漂亮的女教师中文字幕| 高潮床戏有娇喘声视频大全| 性交网站| 满床春水BD| 宝贝放松我就进去不动| 真人性做爰| 中文字幕mv在线观看| 国产网友愉拍精品视频手机| 亚洲超清精品av在线| http://www.the5thsun.com