切圖時(shí)遇到的常見問題總結(jié)(

以前在切專題或是活動(dòng)代碼時(shí)，經(jīng)常會(huì)碰到一些問題，常見的可能就是邊距啊，IE6下PNG圖片的透明問題等等，雖然現(xiàn)在不用寫代碼了，但是還是把這么問題匯總下，以防以后有機(jī)會(huì)再碰到可以參考。大部分其實(shí)是搜刮了網(wǎng)絡(luò)上一些網(wǎng)友的經(jīng)驗(yàn)再進(jìn)行整合的，我只是把合適自己工作的那部分總結(jié)出來(lái)而已。

1、導(dǎo)航菜單在鼠標(biāo)經(jīng)過(guò)時(shí)產(chǎn)生一瞬間的空白

 最早寫導(dǎo)航時(shí)，如果菜單有兩種樣式，會(huì)把默認(rèn)樣式和鼠標(biāo)經(jīng)過(guò)的樣式各保存成一張圖片，后面發(fā)現(xiàn)這樣做，如果圖片太大，可能出現(xiàn)當(dāng)鼠標(biāo)經(jīng)過(guò)菜單時(shí)有一秒鐘的空白。于是后面就把兩種圖片合并在一起，然后利用background-position屬性來(lái)展示我們需要的部分。也因此對(duì)background-position這個(gè)屬性慢慢熟悉起來(lái)，之前都很少用的。畢業(yè)第一年在第一家公司學(xué)到一些技巧真的對(duì)之后我學(xué)習(xí)其他知識(shí)起到很大的作用，好了，這算題外話了，先打住。

舉個(gè)例子：寫彈彈堂專題頁(yè)一個(gè)導(dǎo)航，菜單如下，綠色是默認(rèn)效果，黃色是選中效果

一開始我把默認(rèn)樣式和鼠標(biāo)放上去的樣式各放在一張圖片，這樣就只需要兩張圖片就可以了，但發(fā)現(xiàn)這樣會(huì)出現(xiàn)一個(gè)問題，就是頁(yè)面加載的時(shí)候只加載了第一張圖片（默認(rèn)樣式），而當(dāng)我們點(diǎn)擊按鈕時(shí)它才加載第二張圖片，這樣如果第二張圖片過(guò)大的話，可能就會(huì)出現(xiàn)按鈕不見了或是會(huì)閃一下的問題。解決的方法是直接把以上兩張圖片合成一張?zhí)幚恚缦聢D

這樣就避免上述出現(xiàn)的情況了。像一般的導(dǎo)航標(biāo)題都可以這樣處理。（?_?，這個(gè)貌似全世界都知道……）

2、塊級(jí)元素和行內(nèi)元素的區(qū)別

常見的塊級(jí)元素有div、p、form、ul、ol、li等，常見的行內(nèi)元素有span、strong、em等。

塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下，其寬度自動(dòng)填滿其父元素寬度，行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到拍不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化。

塊級(jí)元素可以設(shè)置width、height屬性，行內(nèi)元素設(shè)置這兩個(gè)屬性無(wú)效。

塊級(jí)元素可以設(shè)置margin和padding屬性，行內(nèi)元素在設(shè)置水平方向的padding-left、padding-right、margin-left、margin-right都產(chǎn)生邊距效果，但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會(huì)產(chǎn)生邊距效果。

塊級(jí)元素相對(duì)應(yīng)的css屬性是display:block，行內(nèi)元素對(duì)應(yīng)的是display:inline，我們可以通過(guò)修改display屬性來(lái)對(duì)它們進(jìn)行切換。

3、IE6下margin加倍問題。

在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或是margin-right，margin值會(huì)加倍。例如，設(shè)置margin-left:10px在IE6下會(huì)顯示為margin-left:20px。解決這個(gè)Bug的辦法就是設(shè)置display:inline。

4、.zoom類

這個(gè)類比較特殊，它設(shè)置的樣式是zoom:1，它并不是CSS標(biāo)準(zhǔn)中的標(biāo)準(zhǔn)屬性，而是IE的專有屬性。大部分的 IE 顯示錯(cuò)誤，都可以通過(guò)激發(fā)元素的 haslayout 屬性來(lái)修正。當(dāng)網(wǎng)頁(yè)在 IE 中有異常表現(xiàn)時(shí)，可以嘗試激發(fā) haslayout 來(lái)看看是不是問題所在。常用的方法是給某元素 css 設(shè)定 zoom:1 。使用 zoom:1 是因?yàn)榇蠖鄶?shù)情況下，它能在不影響現(xiàn)有環(huán)境的條件下激發(fā)元素的 haslayout。

5、IE6透明圖片處理

1）增加javas cript。

這種方法的原理是遍歷網(wǎng)頁(yè)上所有圖片，找出后綴為“PNG”的圖片，然后再給圖片加上透明濾鏡以實(shí)現(xiàn)功能。這種適用于直接在網(wǎng)頁(yè)上引入圖片，比如用<img>標(biāo)簽插入的圖片，如果圖片是放在css里面的，是沒有效果的。

把下面的代碼放在head區(qū)就可以解決問題了。

以下是引用片段：具體代碼可以詳見附件

<s cript>
function correctPNG()
  {
  for(var i=0; i<document.images.length; i++)
     {
     var img = document.images[i]
     var imgName = img.src.toUpperCase()
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
        var imgID = (img.id) ? "id='" + img.id + "' " : ""
        var imgClass = (img.className) ? "class='" + img.className + "' " : ""
        var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
        var imgStyle = "display:inline-block;" + img.style.cssText
        if (img.align == "left") imgStyle = "float:left;" + imgStyle
        if (img.align == "right") imgStyle = "float:right;" + imgStyle
        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle       
        var strNewHTML = "<span "+ imgID + imgClass + imgTitle + "" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');""></span>"
  img.outerHTML = strNewHTML
        i = i-1
        }
     }
  }
window.attachEvent("onload", correctPNG);

</s cript>

2）使用IE5.5+的AlphaImageLoader濾鏡

雖然有讓IE6支持PNG透明背景的JS程序，都是不是很方便，還是用CSS來(lái)實(shí)現(xiàn)的好。使用到的就是：
IE5.5+的AlphaImageLoader濾鏡

語(yǔ)法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false

true : 默認(rèn)值。濾鏡激活。
false : 濾鏡被禁止。

sizingMethod : 可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。 crop : 剪切圖片以適應(yīng)對(duì)象尺寸。
image : 默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。
scale : 縮放圖片以適應(yīng)對(duì)象的尺寸邊界。

src : 必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。

特性：
Enabled : 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod : 可讀寫。字符串(String)。參閱 sizingMethod 屬性。
src : 可讀寫。字符串(String)。參閱 src 屬性。

——————————————————————————————————

實(shí)例：解決IE6下png透明失效的問題。代碼也是詳見附件

文件結(jié)構(gòu)：

-css

  -style.css

-newimages

  -win_03.png

-index.html

CSS樣式:

.win_03{background: url(../newimages/win_03.png) no-repeat scroll 0px 0px transparent; _background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src=newimages/win_03.png);display:block;height:100px;width:126px;

HTML代碼：

<span class="win_03"></span>

——————————————————————————————————

需要注意的是：AlphaImageLoader濾鏡會(huì)導(dǎo)致該區(qū)域的鏈接和按鈕無(wú)效，解決的辦法是為鏈接或按鈕添加： style="position: relative";這樣條代碼，使其相對(duì)浮動(dòng)。AlphaImageLoader無(wú)法設(shè)置背景的重復(fù)，所以對(duì)圖片的切圖精度會(huì)有很高的精確度要求

3）iepngfix.htc和png8讓IE6支持png背景透明

IE6中的PNG圖片透明的一般解決辦法是對(duì)于網(wǎng)頁(yè)中的<img />用JS實(shí)現(xiàn)，PNG背景圖片則是用濾鏡filter實(shí)現(xiàn)。這兩種方法都有明顯的缺點(diǎn)，最為明顯的就是PNG做背景圖片是不能平鋪(repeat)。這里有一個(gè)好的解決方法：iepngfix。iepngfix是利用IE5.5+中的behavior來(lái)實(shí)現(xiàn)在對(duì)HTML文檔沒有影響的情況下實(shí)現(xiàn)IE5.5和IE6對(duì)PNG圖片的支持。

（1） 頁(yè)面中的PNG圖片自動(dòng)透明

（2） 支持<img src="" />元素

（3） 支持PNG背景圖片

（4） 支持CSS1中的背景平鋪(repeat)和定位(12px 24px)

（5） 背景圖片可以定義在頁(yè)面內(nèi)的內(nèi)聯(lián)樣式中也可在外部樣式表中

（6） 支持通過(guò)JS改變src或background

（7） 支持元素動(dòng)態(tài)改變類名(className)

使用方法：按照下面的簡(jiǎn)單步驟應(yīng)用到你的頁(yè)面。具體代碼詳見附件

（1） 復(fù)制iepngfix.htc和blank.gif到你的網(wǎng)站文件夾中

注：實(shí)際應(yīng)用中，貌似不加blasnk.gif這張圖片也是可以的。

（2） 將下面代碼復(fù)制到你的HTML或CSS中：                        

<style type="text/css">

img, div { behavior:url(iepngfix.htc); }

</style>

CSS選擇器（img、div）是指你要應(yīng)用PNG圖片的元素。

（3） 如果你的網(wǎng)站使用子文件夾，用記事本打開iepngfix.htc，修改blankImg變量的路徑，例如：

IEPNGFix.blankImg="/images/blank.gif“;

注：此步驟也可忽略

（4） 如果你要支持CSS1中的background-repeat和background-position屬性，需要在head中包含iepngfix_tilebg.js

  <s cript type="text/javas cript" src="iepngfix_tilebg.js"></s cript>

否則背景圖片會(huì)顯示但不會(huì)repeat或position