JavaScript解決常見瀏覽器安全色問題(1)

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

如果你不知道原因，不要過於擔心，您可以通過下面列出的12個JavaScript解決方案修複它，這樣您的網頁看起來就能跨越所有瀏覽器了！相關文章推薦：JavaScript成瀏覽器戰爭主戰場）

1. 自動匹配高度

自從我們拋棄了基於Table的頁面配置後，建立同等高度欄目或內容盒子的視覺效果已然是一個挑戰。

◆用jQuery設定匹配高度

這個jQuery外掛程式在同一個容器裡“平衡”盒子的高度並創造一個簡介的網格——幾乎從可用性和效能的角度使用簡單的JavaScript替代： equalHeights()函數測定一個容器裡的所有同級元素同容器的高度，然後設定每個元素的最低高度為最高的元素的高度。equalHeights()通過迴圈測定指定元素的最進階別的子節點，然後設定他們的最小高度值為最高的元素的高度。

點擊這裡預覽效果

◆用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使用者 ，同時為網站的大多數訪客帶來最佳的透明效果。

◆強制IE6支援透明

IE7的是一個Dean Edwards建立的JavaScript庫，以強迫MSIE(IE6,IE5)表現的像一個相容標準的瀏覽器。它修複許多CSS問題並使透明PNG在IE6和IE5下正常工作，它還允許進階的CSS選取器。

點擊查看預覽效果

◆改良iFixPng

修正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在基於當前的瀏覽器的名字的標籤會怎麼樣？

◆CSS Browser

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

◆jQuery瀏覽器選取器

這裡有另外一個基於jQuery的非常簡單的處理瀏覽器選取器的方法，你需要做的只是載入jQuery庫檔案，並添加下面的一塊兒代碼。

 

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

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

點擊查看預覽效果