原文：
點這裡...
我們提倡無論何時都盡可能地使用CSS，這樣我們更容易取得成功.現在瀏覽器對CSS的支持已經非常好，肯定足以讓你用來控制你的網頁佈局與排版.但，即使如此，還是有某些頁面元素會在不同的瀏覽器下表現也不一樣。
如果你不瞭解其中的原由，請不用擔心，深入一下CSS的規則並且看一下
Using CSS to Fix Anything: 20+ Common Bugs and Fixes 這個文章.
如果上面那篇文章對你毫無幫助，你可以使用下面12個javascript解決方案的其中之一去修復你的問題，並使你的頁面看起來跨所有瀏覽器！
在本文中，我們將為你在web應用開發中遇到的最常見的CSS問題提供12個javascript解決方案.
你也許會對其它的CSS相關文章感興趣
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes
1. 設置等高
自從我們拋棄以表格為基礎的佈局方式，創建視覺上等高的列或內容塊就成為了一個挑戰.
1.1 使用jquery設置等高
jQuery有個插件可以設置同一個容器內的所有盒子模型的高度相等，而且還可以創建非常簡潔的網格--當然，額外的性能開銷也是微乎其微的.從可用性與性能的角度來看，使用一個簡單的javascript代替會更適合: equalHeights() 這個函數檢測同一個容器中所有兄弟節點元素的高度，然後設置每個元素的最小高度為這些元素中高度值最大的那個。
如何運作
equalHeights() 循環指定元素的頂層子節點，並設置它們的最小高度值為最高的節點的高度值.
查看演示
1.2 使用jQuery設置等高列
另一個設置等高的jQuery插件
程序代碼
$("#col1, #col2").equalizeCols();
上面代碼設置#col1, #col2列等高
程序代碼
$("#col1, #col2").equalizeCols("p,p");
上面代碼會設置#col1,#col2等高，並把增加額外空間的元素添加到#col1和#col2下的p元素中去。
2. IE6 PNG 圖片通明支持
IE6及早期的版本不支持png圖片透明.雖然可以使用一些小竅門令IE5.5或IE6支持png透明，但這不是理想的方式而且難於使用. 讓我們來看看能做點什麼，以支持IE6的用戶，同時使絕大部分的網站訪客能充分獲得透明帶來的好處。
2.1 加強IE6使其支持透明
IE7.js 是由Dean Edwards編寫一個javascript庫，加強了MSIE(IE6， IE5)的行為，使其看起來就像兼容標準的瀏覽器一樣。它修復了IE5與IE6下的許多CSS問題並能使png透明正常工作.它還允許使用先進的CSS選擇器。
查看演示
源代碼下載
2.2. iFixPng improved
它修復了IE6及更早版本的png圖片問題，包括所有圖片元素及使用CSS設定的背景圖片. 這個插件是原來的jQuery插件 iFixPng 的改進版本.特徵有: 修復指定圖片或帶背景圖元素的問題*， 支持使用了CSS背景中background-position屬性的圖片， 還修復了IE絕對定位的問題. (bottom: -1px || bottom: 0px)
查看演示
源代碼下載
3. 用JavaScript改變CSS類
這是一個簡單的JavaScript函數，它可以改變當前文檔中任何元素的類.當要在運行時使用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;
}
}
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代碼了。
4.1 CSS Browser
這是一段非常簡單的javascript代碼，它短小精悍，能使你使用CSS選擇器.使用它你可以在任何瀏覽器編寫特殊的CSS代碼. 你可以為瀏覽器中設置了類名的元素寫上一段javascript代碼。
查看演示
源文件下載
jQuery browser selectors
另外一個選擇就是使用jQuery，它可以讓你使用瀏覽器的選擇器更加方便，你所需要做的事就是引入jQuery， 然後編寫如下代碼:
程序代碼
$(document).ready(function(){
$('html').addClass($.browser);
});
現在你可以準備好.msie, .mozilla, .opera, .safari 或 .other 這些依賴目標瀏覽器的樣式了.
查看演示
5. 最大/最小寬高支持
對於CSS的min-width, min-height, max-width, max-height, border-*-width, margin, 與padding屬性在某些瀏覽器不被支持的問題，jQuery提供了非常好的解決方案.
5.1 jQMinMax
這個jQuery插件為沒有提供原生支持min-width, max-width, min-height與max-height這些屬性的瀏覽器添加支持。
查看演示
源文件下載
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中垂直居中是非常困難的， 特別是你想支持所有主流瀏覽器的情況下.非常幸運，現在已經有了解決方案，其中一個方式就是從高度與寬度中取得元素左邊與頂部頁邊距值再除以2，得到的便 是要居中元素的margin-left與margin-top.(這句話理解不知道有沒有問題)
6.1 居中頁面元素插件
這個插件可以居中頁面的任何元素，使用了水平與垂直上減去頁邊距的辦法.
程序代碼
$("element").center(); //vertical and horizontal$("element").center({ horizontal: false // only vertical});
查看演示
源文件下載
6.2 我如何垂直居中頁面元素?
在這個視頻教程中，Jeffrey Jordan Way會向你展示如何利用CSS與jQuery組合的威力，在瀏覽器垂直居中圖片。
7. 在IE中顯示Q標籤
表現引號應該使用Q標籤而不是blockquote標籤.然而，windows下的IE不支持這個標籤，因此，很多開發都不使用Q標籤。
7.1 QinIE
當你把這段腳本引入到你的網頁文檔頭部，它就可以自動地把頁面中的Q標籤替換成引號(包括對應的結束引號)。如果將來IE支持Q標籤，你可能要修改它，加上瀏覽器版本的判斷.
源文件下載
8. 增大點擊目標的範圍以獲得更直接的切換
對厭煩的『Read More…』說再見，使你整個內容塊都可以點擊進入目標鏈接！
源文件下載
9. Lazy loader
這是一個jQuery插件. 它可以使(內容較長的)頁面的圖片延遲加載。在viewport(頁面的可見部分)之外的圖片不會被加載，直到用戶拖動滾動條到它們的時候。這與 圖片預載 是截然相反的。
查看演示
源文件下載
10. bgiframe
這個jQuery插件可以輕鬆解決IE z-index的問題。
查看演示
源文件下載
11. ieFixButtons
這個jQuery插件可以修復button元素在IE6 與IE7下的怪異行為。
查看演示
源文件下載
12. Fix Overflow
這個插件修復IE下的水平溢出問題.特別地，IE會自動為溢出的元素添加滾動條，如果元素只有一行，那這個滾動條就會覆蓋在元素的上面。這個插件通過調整元素的填充來修復這個問題。
文章來自blueidea
