古风小说,琅琊榜海宴小说,已完本玄幻小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

JavaScript解決常見瀏覽器兼容問題

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

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鳳泉網(wǎng)站建設(shè)、鳳泉做網(wǎng)站、鳳泉網(wǎng)站設(shè)計、鳳泉網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鳳泉企業(yè)網(wǎng)站模板建站服務(wù)，十載鳳泉做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

如果你不知道原因，不要過于擔(dān)心，您可以通過下面列出的12個JavaScript解決方案修復(fù)它，這樣您的網(wǎng)頁看起來就能跨越所有瀏覽器了?。ㄏ嚓P(guān)文章推薦：JavaScript成瀏覽器戰(zhàn)爭主戰(zhàn)場）

1. 自動匹配高度

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

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

這個jQuery插件在同一個容器里“平衡”盒子的高度并創(chuàng)造一個簡介的網(wǎng)格——幾乎從可用性和性能的角度使用簡單的JavaScript替代： equalHeights()函數(shù)測定一個容器里的所有同級元素同容器的高度，然后設(shè)置每個元素的最低高度為最高的元素的高度。equalHeights()通過循環(huán)測定指定元素的最高級別的子節(jié)點，然后設(shè)置他們的最小高度值為最高的元素的高度。

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

◆用jQuery匹配欄目高度

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

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

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

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

匹配這兩卷，并在#col1或#col2(短的那個)里的P標簽后面添加空白。

2. IE6 PNG透明支持

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

◆強制IE6支持透明

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

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

◆改良iFixPng

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

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

3. 用JavaScript改變class

這是一個方便的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;  
  
  
  
        }  
  
  
  
  }

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

4. CSS瀏覽器選擇器

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

◆CSS Browser

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

◆jQuery瀏覽器選擇器

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

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

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

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

#p#

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

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

◆jQMinMax

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

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

◆JSizes

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

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

6. 元素垂直/水平居中

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

◆Center element plugin

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

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

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

7. 在IE里使用Q標簽

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

◆QinIE

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

#p#

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

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

9. Lazy loader

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

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

10. bgiframe

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

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

11. ieFixButtons

ieFixButtons 是一個修正IE6和7的

新聞中心

其他資訊