1. 自動(dòng)匹配高度

Javascipt-自動(dòng)匹配高度 height=220 alt=Javascipt-自動(dòng)匹配高度 src="/d/file/itjie/JavaScriptjishu/2014-10-23/6bf398d9fc80a788d617f9b7a1e156af.jpg" width=400>

自從我們拋棄了基于Table的頁(yè)面布局后，創(chuàng)建同等高度欄目或內(nèi)容盒子的視覺(jué)效果已然是一個(gè)挑戰(zhàn)。

1.1 用jQuery設(shè)置匹配高度

這個(gè)jQuery插件在同一個(gè)容器里“平衡”盒子的高度并創(chuàng)造一個(gè)簡(jiǎn)介的網(wǎng)格――幾乎從可用性和性能的角度使用簡(jiǎn)單的JavaScript替代： equalHeights()函數(shù)測(cè)定一個(gè)容器里的所有同級(jí)元素同容器的高度，然后設(shè)置每個(gè)元素的最低高度為最高的元素的高度。

如何工作

equalHeights()通過(guò)循環(huán)測(cè)定指定元素的最高級(jí)別的子節(jié)點(diǎn)，然后設(shè)置他們的最小高度值為最高的元素的高度。

點(diǎn)擊這里預(yù)覽效果

1.2 用jQuery匹配欄目高度

jQuery的另一個(gè)可以使盒子的高度相等的插件

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

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

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

匹配這兩卷，并在#col1或#col2(短的那個(gè))里的P標(biāo)簽后面添加空白.

2. IE6 PNG透明支持

IE6以下的版本不支持png透明。使用hack，IE 5.5和6也已經(jīng)可以支持，但hack并不理想的且難以使用。讓我們來(lái)看看我們能做些什么來(lái)支持IE6用戶(hù) ，同時(shí)為網(wǎng)站的大多數(shù)訪(fǎng)客帶來(lái)最佳的透明效果。

2.1 強(qiáng)制IE6支持透明

IE7的是一個(gè)Dean Edwards建立的JavaScript庫(kù)，以強(qiáng)迫MSIE(IE6,IE5)表現(xiàn)的像一個(gè)兼容標(biāo)準(zhǔn)的瀏覽器。它修復(fù)許多CSS問(wèn)題并使透明PNG在IE6和IE5下正常工作，它還允許高級(jí)的CSS選擇器。

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊下載源文件

2.2. 改良iFixPng

Javascript-IE6-透明圖片 height=180 alt=Javascript-IE6-透明圖片 src="/d/file/itjie/JavaScriptjishu/2014-10-23/e4f9c2ae1dcbb1cc65b23f1e8e7bd6d9.jpg" width=400>

修正IE6及以下的PNG圖片的問(wèn)題，IMG標(biāo)簽和CSS背景圖片都可以。這個(gè)插件是對(duì)原始iFixPng插件的一種改進(jìn)。特點(diǎn)包括：圖像或有背景圖片的標(biāo)簽，現(xiàn)在支持background-position，其中包括IE瀏覽器的絕對(duì)定位的修正。(bottom: -1px || bottom: 0px)

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊這里下載源文件

3. 用Javascript改變class

Javascript-改-class height=150 alt="" src="/d/file/itjie/JavaScriptjishu/2014-10-23/f198258d86b3f555679d235f4fa5d1a3.jpg" width=400>

這是一個(gè)方便的JavaScript函數(shù)，可以在當(dāng)前的文件的任何元素的class由oldClass改為newClass。這是特別有用的快速的利用CSS而不是用編碼改變風(fēng)格。

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

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊下載源文件

4. CSS瀏覽器選擇器

如果您可以只需鍵入一個(gè)特殊選擇器，在這里您可以寫(xiě)一些JavaScript ，設(shè)置一個(gè)Class在基于當(dāng)前的瀏覽器的名字的標(biāo)簽會(huì)怎么樣？

Javascript-css-選擇器 height=150 alt=Javascript-css-選擇器 src="/d/file/itjie/JavaScriptjishu/2014-10-23/c6a6732ba454e3af0d6408beed399f1b.jpg" width=400>

4.1 CSS Browser

這是一個(gè)非常小的Javascript只有一行，而且不到1kb，它允許CSS選擇器。它讓您可以為每個(gè)操作系統(tǒng)和每個(gè)瀏覽器寫(xiě)具體的CSS代碼。你可以寫(xiě)一些JavaScript ，設(shè)置Class的名字，也就是說(shuō)，內(nèi)容根據(jù)當(dāng)前的瀏覽器。

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊下載源文件

jQuery 瀏覽器選擇器

這里有另外一個(gè)基于jQuery的非常簡(jiǎn)單的處理瀏覽器選擇器的方法，你需要做的只是加載jQuery庫(kù)文件，并添加下面的一塊兒代碼。

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

現(xiàn)在你可以準(zhǔn)備你的樣式，如.msie,.mozilla, .opera, .safari 或其它目標(biāo)瀏覽器。

點(diǎn)擊查看預(yù)覽效果

5. 最小/最大 高度/寬度支持

針對(duì)CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 屬性，這里有一些很好的jQuery修正。

5.1 jQMinMax

這是一個(gè)為沒(méi)有原聲的支持min-width, max-width,min-height和max-height的地方添加支持的jQuery插件。

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊下載源文件

5.2 JSizes

這個(gè)小jQuery插件為CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 屬性添加支持。特別是他提供一種方法來(lái)確定一個(gè)元素在那里可見(jiàn)。由于所有的型號(hào)的方法返回?cái)?shù)值，所以這些也可以安全的使用在嚴(yán)格的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});
});

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊下載源文件

6. 元素垂直/水平居中

你可能之前遇到過(guò)這個(gè)問(wèn)題：水平或垂直居中某個(gè)元素。垂直居中在CSS里面相當(dāng)麻煩，特別是你想支持所有主流瀏覽器。

Javascrpt-垂直居中 height=200 alt=Javascrpt-垂直居中 src="/d/file/itjie/JavaScriptjishu/2014-10-23/d7d50a7d33158c5cd2a36db1279e0aa4.jpg" width=400>

6.1 Center element plugin

這個(gè)插件可以使頁(yè)面中的所有元素居中，垂直和水平居中采用css負(fù)margin的方法。

$(“element”).center(); //vertical and horizontal
$(“element”).center({
horizontal: false // only vertical
});

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊下載源文件

6.2 我是怎么把一個(gè)元素垂直居中的?

在這個(gè)視頻教程里， Jeffrey Jordan Way將為你展示如何使用jQuery的力量結(jié)合CSS在你的瀏覽器里面使一個(gè)圖片垂直居中.

7. 在IE里使用Q標(biāo)簽

人們期望使用的Q標(biāo)簽而不是blockquote標(biāo)簽來(lái)顯示引號(hào)。然而IE/Win不支持Q標(biāo)簽，因?yàn)檫@一點(diǎn)，大部分網(wǎng)站的作者選擇不使用Q標(biāo)簽。

7.1 QinIE

當(dāng)你在你的文件的頭部添加這個(gè)腳本在IE瀏覽器里自動(dòng)掃描的網(wǎng)頁(yè)Q的標(biāo)記，并正確的顯示它們（包括嵌套引用） 。當(dāng)(如果)IE瀏覽器將來(lái)支持Q標(biāo)簽，這個(gè)插件將會(huì)添加瀏覽器版本檢查。

點(diǎn)擊下載源文件

8. 增加點(diǎn)擊目標(biāo)的大小和獲得更多的響應(yīng)轉(zhuǎn)換

Javascript-js height=220 alt=Javascript-js src="/d/file/itjie/JavaScriptjishu/2014-10-23/005c6d55b7326e8267ed28c227eceafa.jpg" width=400>

通過(guò)把你的所有內(nèi)容放到一個(gè)可點(diǎn)擊的標(biāo)簽來(lái)和單調(diào)的“read more…”鏈接說(shuō)拜拜吧。

點(diǎn)擊下載源文件

9. Lazy loader

Lazy loader 是一個(gè)jQuery。它可以延遲加載頁(yè)面里面的圖片. 在用戶(hù)瀏覽視界(頁(yè)面中可見(jiàn)部分)以外的圖片之前，它將不會(huì)被加載。這和image preloading的作用正好相反.

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊這里下載源文件

10. bgiframe

輕松的解決IE下的z-index的問(wèn)題。

Javascript-bgiframe height=180 alt=Javascript-bgiframe src="/d/file/itjie/JavaScriptjishu/2014-10-23/8c504dbb1bb6af74f503e104e08ec2a3.jpg" width=400>

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊這里下載源文件

11. ieFixButtons

ieFixButtons 是一個(gè)修正IE6和7的<button>標(biāo)簽的bug的jquery插件。

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊這里下載源文件

12. 溢出(overflow)修正

修正ie下的水平溢出。IE在溢出的元素里面顯示一個(gè)滾動(dòng)條，特別是如果元素里面只有一行，滾動(dòng)條就會(huì)遮住這行內(nèi)容。這個(gè)插件通過(guò)修改padding來(lái)修正這個(gè)問(wèn)題。

Javascript-overflow-解決 height=285 alt=Javascript-overflow-解決 src="/d/file/itjie/JavaScriptjishu/2014-10-23/103e5f84db30e841b9fa0ed5a7d2e524.jpg" width=400>

點(diǎn)擊查看預(yù)覽效果
點(diǎn)擊這里下載源文件

英文原文:Using Javascript to Fix 12 Common Browser Headaches

中文翻譯原文:用JavaSCRIPT修正12個(gè)常見(jiàn)的瀏覽器問(wèn)題

JavaScript技術(shù)：Javascript解決常見(jiàn)瀏覽器兼容問(wèn)題的12種方法，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。