切图时遇到的常见问题

以前在切专题或是活动代码时，经常会碰到一些问题，常见的可能就是边距啊，IE6下PNG图片的透明问题等等，虽然现在不用写代码了，但是还是把这么问题汇总下，以防以后有机会再碰到可以参考。大部分其实是搜刮了网络上一些网友的经验再进行整合的，我只是把合适自己工作的那部分总结出来而已。

1、导航菜单在鼠标经过时产生一瞬间的空白

最早写导航时，如果菜单有两种样式，会把默认样式和鼠标经过的样式各保存成一张图片，后面发现这样做，如果图片太大，可能出现当鼠标经过菜单时有一秒钟的空白。于是后面就把两种图片合并在一起，然后利用background-position属性来展示我们需要的部分。也因此对background-position这个属性慢慢熟悉起来，之前都很少用的。毕业第一年在第一家公司学到一些技巧真的对之后我学习其他知识起到很大的作用，好了，这算题外话了，先打住。

举个例子：写弹弹堂专题页一个导航，菜单如下，绿色是默认效果，黄色是选中效果

一开始我把默认样式和鼠标放上去的样式各放在一张图片，这样就只需要两张图片就可以了，但发现这样会出现一个问题，就是页面加载的时候只加载了第一张图片（默认样式），而当我们点击按钮时它才加载第二张图片，这样如果第二张图片过大的话，可能就会出现按钮不见了或是会闪一下的问题。解决的方法是直接把以上两张图片合成一张处理，如下图

这样就避免上述出现的情况了。像一般的导航标题都可以这样处理。（눈_눈，这个貌似全世界都知道……）

2、块级元素和行内元素的区别

常见的块级元素有div、p、form、ul、ol、li等，常见的行内元素有span、strong、em等。

块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到拍不下，才会换行，其宽度随元素的内容而变化。

块级元素可以设置width、height属性，行内元素设置这两个属性无效。

块级元素可以设置margin和padding属性，行内元素在设置水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

块级元素相对应的css属性是display:block，行内元素对应的是display:inline，我们可以通过修改display属性来对它们进行切换。

3、IE6下margin加倍问题。

在IE6下，如果对元素设置了浮动，同时又设置了margin-left或是margin-right，margin值会加倍。例如，设置margin-left:10px在IE6下会显示为margin-left:20px。解决这个Bug的办法就是设置display:inline。

4、.zoom类

这个类比较特殊，它设置的样式是zoom:1，它并不是CSS标准中的标准属性，而是IE的专有属性。大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1 。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。

5、IE6透明图片处理

1）增加javas cript。

这种方法的原理是遍历网页上所有图片，找出后缀为“PNG”的图片，然后再给图片加上透明滤镜以实现功能。这种适用于直接在网页上引入图片，比如用<img>标签插入的图片，如果图片是放在css里面的，是没有效果的。

把下面的代码放在head区就可以解决问题了。

以下是引用片段：具体代码可以详见附件

<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来实现的好。使用到的就是：
IE5.5+的AlphaImageLoader滤镜

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

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false

true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src : 可读写。字符串(String)。参阅 src 属性。

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

实例：解决IE6下png透明失效的问题。代码也是详见附件

文件结构：

-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代码：

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

需要注意的是：AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加： style="position: relative";这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求

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

IE6中的PNG图片透明的一般解决办法是对于网页中的<img />用JS实现，PNG背景图片则是用滤镜filter实现。这两种方法都有明显的缺点，最为明显的就是PNG做背景图片是不能平铺(repeat)。这里有一个好的解决方法：iepngfix。iepngfix是利用IE5.5+中的behavior来实现在对HTML文档没有影响的情况下实现IE5.5和IE6对PNG图片的支持。

（1）页面中的PNG图片自动透明

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

（3）支持PNG背景图片

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

（5）背景图片可以定义在页面内的内联样式中也可在外部样式表中

（6）支持通过JS改变src或background

（7）支持元素动态改变类名(className)

使用方法：按照下面的简单步骤应用到你的页面。具体代码详见附件

（1）复制iepngfix.htc和blank.gif到你的网站文件夹中

注：实际应用中，貌似不加blasnk.gif这张图片也是可以的。

（2）将下面代码复制到你的HTML或CSS中：

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

</style>

CSS选择器（img、div）是指你要应用PNG图片的元素。

（3）如果你的网站使用子文件夹，用记事本打开iepngfix.htc，修改blankImg变量的路径，例如：

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

注：此步骤也可忽略

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

否则背景图片会显示但不会repeat或position