<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Hopes

    Start Here..

     

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

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

    2008年10月17日 | 暴風(fēng)彬彬

    javascript-瀏覽器-兼容性

      我們提倡盡可能使用CSS,而且我們常常能做到這一點(diǎn)。現(xiàn)代瀏覽器有很好的CSS支持-這無疑足夠好讓你使用CSS來控制布局和版面設(shè)計(jì)。但是有時(shí)候,某些網(wǎng)頁(yè)元素在不同的瀏覽器會(huì)出現(xiàn)不同。

      如果你不知道原因,不要過于擔(dān)心,請(qǐng)研究CSS規(guī)則并查看這篇文章:使用CSS來修正一切: 20 +常見錯(cuò)誤和修復(fù)

      如果這些也無效,您可以通過下面列出的12個(gè)javascript解決方案修復(fù)它,這樣您的網(wǎng)頁(yè)看起來就能跨越所有瀏覽器了!

      在本文中,我們會(huì)揭開你在開發(fā)web應(yīng)用是可能會(huì)遇到的12個(gè)最常見CSS問題的javascript解決方案。


    1. 自動(dòng)匹配高度

    javascipt-自動(dòng)匹配高度

      自從我們拋棄了基于Table的頁(yè)面布局后,創(chuàng)建同等高度欄目或內(nèi)容盒子的視覺效果已然是一個(gè)挑戰(zhàn)。


    1.1 用jQuery設(shè)置匹配高度

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

    如何工作

      equalHeights()通過循環(huán)測(cè)定指定元素的最高級(jí)別的子節(jié)點(diǎn),然后設(shè)置他們的最小高度值為最高的元素的高度。

    點(diǎn)擊這里預(yù)覽效果


    1.2 用jQuery匹配欄目高度

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

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

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

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


    匹配這兩卷,并在#col1或#col2(短的那個(gè))里的P標(biāo)簽后面添加空白.

    2. IE6 PNG透明支持

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

    2.1 強(qiáng)制IE6支持透明

      IE7的是一個(gè)Dean Edwards建立的JavaScript庫(kù),以強(qiáng)迫MSIE(IE6,IE5)表現(xiàn)的像一個(gè)兼容標(biāo)準(zhǔn)的瀏覽器。它修復(fù)許多CSS問題并使透明PNG在IE6和IE5下正常工作,它還允許高級(jí)的CSS選擇器。

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊下載源文件

    2.2. 改良iFixPng

    javascript-IE6-透明圖片

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

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊這里下載源文件

    3. 用Javascript改變class

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


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

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊下載源文件


    4. CSS瀏覽器選擇器

      如果您可以只需鍵入一個(gè)特殊選擇器,在這里您可以寫一些JavaScript ,設(shè)置一個(gè)Class在基于當(dāng)前的瀏覽器的名字的標(biāo)簽會(huì)怎么樣?

    javascript-css-選擇器

    4.1 CSS Browser

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

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊下載源文件

    jQuery 瀏覽器選擇器

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

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

      現(xiàn)在你可以準(zhǔn)備你的樣式,如.msie,.mozilla, .opera, .safari 或其它目標(biāo)瀏覽器。

    點(diǎn)擊查看預(yù)覽效果


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

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

    5.1 jQMinMax

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

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊下載源文件

    5.2 JSizes

      這個(gè)小jQuery插件為CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 屬性添加支持。特別是他提供一種方法來確定一個(gè)元素在那里可見。由于所有的型號(hào)的方法返回?cái)?shù)值,所以這些也可以安全的使用在嚴(yán)格的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});
    });

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊下載源文件


    6. 元素垂直/水平居中

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

    javascrpt-垂直居中

    6.1 Center element plugin

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

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

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊下載源文件

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

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


    7. 在IE里使用Q標(biāo)簽

      人們期望使用的Q標(biāo)簽而不是blockquote標(biāo)簽來顯示引號(hào)。然而IE/Win不支持Q標(biāo)簽,因?yàn)檫@一點(diǎn),大部分網(wǎng)站的作者選擇不使用Q標(biāo)簽。

    7.1 QinIE

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

    點(diǎn)擊下載源文件


    8. 增加點(diǎn)擊目標(biāo)的大小和獲得更多的響應(yīng)轉(zhuǎn)換

    javascript-js

      通過把你的所有內(nèi)容放到一個(gè)可點(diǎn)擊的標(biāo)簽來和單調(diào)的“read more…”鏈接說拜拜吧。

    點(diǎn)擊下載源文件


    9. Lazy loader

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

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊這里下載源文件


    10. bgiframe

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

    javascript-bgiframe

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊這里下載源文件


    11. ieFixButtons

      ieFixButtons 是一個(gè)修正IE6和7的<button>標(biāo)簽的bug的jquery插件。

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊這里下載源文件


    12. 溢出(overflow)修正

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

    javascript-overflow-解決

    點(diǎn)擊查看預(yù)覽效果
    點(diǎn)擊這里下載源文件



    英文原文:Using Javascript to Fix 12 Common Browser Headaches

    中文翻譯原文:用JAVASCRIPT修正12個(gè)常見的瀏覽器問題

    posted on 2012-07-24 20:56 ** 閱讀(270) 評(píng)論(0)  編輯  收藏


    只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


    網(wǎng)站導(dǎo)航:
     

    導(dǎo)航

    統(tǒng)計(jì)

    公告

    你好!

    常用鏈接

    留言簿(2)

    隨筆檔案

    文章分類

    文章檔案

    新聞檔案

    相冊(cè)

    收藏夾

    C#學(xué)習(xí)

    友情鏈接

    搜索

    最新評(píng)論

    閱讀排行榜

    評(píng)論排行榜

    主站蜘蛛池模板: 亚洲AV无码一区二区大桥未久 | 日本卡1卡2卡三卡免费| 亚洲av无码精品网站| 免费看一级高潮毛片| 免费a级毛片大学生免费观看| 亚洲无mate20pro麻豆| 99久久免费国产香蕉麻豆| 亚洲欧洲日产国产综合网| 亚洲精品一卡2卡3卡三卡四卡| 久久久久免费精品国产| 亚洲av中文无码乱人伦在线r▽| 国产成年无码久久久免费| 亚洲嫩草影院久久精品| 久久成人国产精品免费软件| 国产成人啪精品视频免费网| 久久亚洲AV午夜福利精品一区| 国产精品亚洲精品久久精品| 国产在线19禁免费观看国产 | 国产禁女女网站免费看| 国产亚洲漂亮白嫩美女在线| 亚洲一级特黄大片无码毛片 | 亚洲V无码一区二区三区四区观看 亚洲αv久久久噜噜噜噜噜 | 中文字幕乱码免费看电影| 久久久久久国产精品免费免费| 国产成人精品日本亚洲专区61| 亚洲一区二区三区国产精品无码| 亚洲精品黄色视频在线观看免费资源 | 亚洲精品国产成人影院| 久久最新免费视频| 亚洲高清免费在线观看| 一区二区三区免费高清视频| 免费a级毛片无码a∨蜜芽试看| 国产亚洲精品国产福利在线观看| 中文字幕亚洲电影| 97国产免费全部免费观看| 日本亚洲欧美色视频在线播放| 亚洲色偷偷偷鲁综合| 色老头综合免费视频| 亚洲色图在线观看| 免费永久国产在线视频| 蜜桃成人无码区免费视频网站|