用javascript修複瀏覽器中頭痛問題的方法整理篇[譯]第1/4頁

如果你不瞭解其中的原由,請不用擔心,深入一下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元素中去.