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

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

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

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

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

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

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

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

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

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

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

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

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

3、IE6下margin加倍問題。

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

4、.zoom類

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

5、IE6透明圖片處理

1）增加javas cript。

這種方法的原理是遍歷網(wǎng)頁上所有圖片，找出后綴為“PNG”的圖片，然后再給圖片加上透明濾鏡以實現(xiàn)功能。這種適用于直接在網(wǎng)頁上引入圖片，比如用<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來實現(xiàn)的好。使用到的就是：
IE5.5+的AlphaImageLoader濾鏡

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

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

true : 默認值。濾鏡激活。
false : 濾鏡被禁止。

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

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

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

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

實例：解決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濾鏡會導(dǎo)致該區(qū)域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加： style="position: relative";這樣條代碼，使其相對浮動。AlphaImageLoader無法設(shè)置背景的重復(fù)，所以對圖片的切圖精度會有很高的精確度要求

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

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

（1） 頁面中的PNG圖片自動透明

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

（3） 支持PNG背景圖片

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

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

（6） 支持通過JS改變src或background

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

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

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

注：實際應(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>

否則背景圖片會顯示但不會repeat或position