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

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

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

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

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

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

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

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)生邊距效果。

塊級元素相對應的css屬性是display:block，行內(nèi)元素對應的是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標準中的標準屬性，而是IE的專有屬性。大部分的 IE 顯示錯誤，都可以通過激發(fā)元素的 haslayout 屬性來修正。當網(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>標簽插入的圖片，如果圖片是放在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 : 剪切圖片以適應對象尺寸。
image : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale : 縮放圖片以適應對象的尺寸邊界。

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

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)

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

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

注：實際應用中，貌似不加blasnk.gif這張圖片也是可以的。

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

<style type="text/css">

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

</style>

CSS選擇器（img、div）是指你要應用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