Javascript解決瀏覽器安全色問題12個技巧(1)

本文向大家簡單介紹一下12種Javascript解決常見瀏覽器安全色問題的方法，現代瀏覽器有很好的CSS支援-這無疑足夠好讓你使用CSS來控制布局和版面設計。但是有時候，某些網頁元素在不同的瀏覽器會出現不同。

12種Javascript解決常見瀏覽器安全色問題的方法

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

如果你不知道原因，不要過於擔心，請研究CSS規則並查看這篇文章:使用CSS來修正一切:20+常見錯誤和修複。如果這些也無效，您可以通過下面列出的12個javascript解決方案修複它，這樣您的網頁看起來就能跨越所有瀏覽器了！在本文中，我們會揭開你在開發web應用是可能會遇到的12個最常見的CSS問題的javascript解決方案。

1.自動匹配高度

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

1.1用jQuery設定匹配高度

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

如何工作

equalHeights()通過迴圈測定指定元素的最進階別的子節點，然後設定他們的最小高度值為最高的元素的高度。

1.2用jQuery匹配欄目高度

jQuery的另一個可以使盒子的高度相等的外掛程式

 

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

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

 

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

匹配這兩卷，並在#col1或#col2(短的那個)裡的P標籤後面添加空白.

2.IE6PNG透明支援

IE6以下的版本不支援png透明。使用hack，IE5.5和6也已經可以支援，但hack並不理想的且難以使用。讓我們來看看我們能做些什麼來支援IE6使用者，同時為網站的大多數訪客帶來最佳的透明效果。

2.1強制IE6支援透明

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

2.2.改良iFixPng

修正IE6及以下的PNG圖片的問題，IMG標籤和CSS背景圖片都可以。這個外掛程式是對原始iFixPng外掛程式的一種改進。特點包括：映像或有背景圖片的標籤，現在支援background-position，其中包括IE瀏覽器的絕對位置的修正。(bottom:-1px||bottom:0px)

3.用Javascript改變class

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

 

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