我們提倡盡可能使用CSS,而且我們常常能做到這一點,F(xiàn)代瀏覽器有很好的CSS支持-這無疑足夠好讓你使用CSS來控制布局和版面設計。但是有時候,某些網(wǎng)頁元素在不同的瀏覽器會出現(xiàn)不同。
如果你不知道原因,不要過于擔心,請研究CSS規(guī)則并查看這篇文章:使用CSS來修正一切: 20 +常見錯誤和修復。
如果這些也無效,您可以通過下面列出的12個javascript解決方案修復它,這樣您的網(wǎng)頁看起來就能跨越所有瀏覽器了!
在本文中,我們會揭開你在開發(fā)web應用是可能會遇到的12個最常見的CSS問題的javascript解決方案。
1. 自動匹配高度
自從我們拋棄了基于Table的頁面布局后,創(chuàng)建同等高度欄目或內(nèi)容盒子的視覺效果已然是一個挑戰(zhàn)。
1.1 用jQuery設置匹配高度
這個jQuery插件在同一個容器里“平衡”盒子的高度并創(chuàng)造一個簡介的網(wǎng)格——幾乎從可用性和性能的角度使用簡單的JavaScript替代: equalHeights()函數(shù)測定一個容器里的所有同級元素同容器的高度,然后設置每個元素的最低高度為最高的元素的高度。
如何工作
equalHeights()通過循環(huán)測定指定元素的最高級別的子節(jié)點,然后設置他們的最小高度值為最高的元素的高度。
1.2 用jQuery匹配欄目高度
jQuery的另一個可以使盒子的高度相等的插件
$(“#col1, #col2″).equalizeCols();
將如你所想的那樣匹配高度
$(“#col1, #col2″).equalizeCols(“p,p”);
匹配這兩卷,并在#col1或#col2(短的那個)里的P標簽后面添加空白.
出處:前端觀察
責任編輯:bluehearts
上一頁 下一頁 javascript修正12個瀏覽器兼容問題 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|