png在IE6下透明的几种方法

断桥残雪在《IE6 PNG图片不透明问题的解决方法》中提到了使用js来解决IE6下PNG图片不透明的问题,今天我总结一下png在IE6下透明的方法:css方法js方法htc方法

png透明针对IE6一直是件挺麻烦的事情,使用的方法也是各有不同,大多的原理是用IE的滤镜来解决的。
语法:
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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
现在一般在使用的方法有以下几种:

主流浏览器的CSS Hack方法整理

由于不同的浏览器,比如IE6、IE7、Firefox等,对CSS的解析不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。我在写WordPress天气预报插件的时候就碰见了一个CSS hack的问题:在IE6下不能显示正常。本来一个很好的WordPress天气预报插件就因为IE6给推迟了发布时间。所以对于前端开发人员CSS兼容性是个比较棘手的问题,当然对于不同浏览器也有不同的CSS hack的方法,此处本人就整理了一些常用到CSS hack方法,分享给大家,希望对大家有用。

CSS Hack浏览器的顺序

对于不同浏览器的CSS hack是有顺序区分的,一般的书写hack的顺序是:Firefox -> IE7 -> IE6 -> 其他
当然推荐大家使用Firefox+Firebug来进行调试,注意书写的时候要尽量标准,记住封口,很多时候不封口在FF,IE7下显示正常,可是在IE6下就全部乱了~

CSS Hack整理汇总

这些方法相信很多人已经很熟悉了:比如 IE6能识别下划线”_“和星号” * “,IE7能识别星号” * “,但不能识别下划线”_“,而firefox两个都不能认识。

使用if IE hack注释解决CSS以及JS的兼容问题

IE CSS hack(更多方法)当中常用到if IE 来判断浏览器的类型,解决CSS甚至于JS的兼容性问题,之前大家可能知道if IE来解决CSS的兼容性问题,其实if IE不仅仅是用于CSS hack的使用,我们在前端开发中甚至可以使用if IE来做JS的处理,如下面的代码:

<!–[if IE 5]> <script>document.write(“仅IE5.0与IE5.5可以识别”);</script> <![endif]–>

<!–[if gte IE 5.0]><script>document.write(“IE5.0以及IE5.0以上版本都可以识别”);</script><![endif]–>

<!–[if IE 6]><script>document.write(“仅IE6可识别”);</script><![endif]–>

<!–[if lt IE 6]><script>document.write(“IE6以下版本可识别”);</script><![endif]–>

<!–[if gte IE 6]><script>document.write(“IE6以及IE6以上版本可识别”);</script><![endif]–>

<!–[if IE 7]><script>document.write(“仅IE7可识别”);</script> <![endif]–>

<!–[if lt IE 7]><script>document.write(“IE7以下版本可识别”);</script><![endif]–>

<!–[if gte IE 7]><script>document.write(“IE7以及IE7以上版本可识别”);</script><![endif]–>
下面对if IE做一下详细的解释:

CSS清除浏览器默认样式注意点

今天看了岁月如歌的一片文章《KISSY CSS Reset 1.0》其中写到了css重置的代码

/
KISSY CSS Reset
理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
特色:1. 适应中文;2. 基于最新主流浏览器。
维护:玉伯, 正淳
Revision: 276
/

/ 清除内外边距 /
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, / structural elements 结构元素 /
dl, dt, dd, ul, ol, li, / list elements 列表元素 /
pre, / text formatting elements 文本格式元素 /
form, fieldset, legend, button, input, textarea, / form elements 表单元素 /
th, td / table elements 表格元素 / {
margin: 0;
padding: 0;
}

/ 设置默认字体 /
body,
button, input, select, textarea / for ie / {
font: 12px/1.5 tahoma, arial, simsun, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } / 将斜体扶正 /
code, kbd, pre, samp { font-family: courier new, courier, monospace; } / 统一等宽字体 /
small { font-size: 12px; } / 小于 12px 的中文很难阅读,让 small 正常化 /

/ 重置列表元素 /
ul, ol { list-style: none; }

/ 重置文本格式元素 /
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } / 重置,减少对行高的影响 /
sub { vertical-align: text-bottom; }

/ 重置表单元素 /
legend { color: #000; } / for ie6 /
fieldset, img { border: 0; } / img 搭车:让链接里的 img 无边框 /
button, input, select, textarea { font-size: 100%; } / 使得表单元素在 ie 下能继承字体大小 /
/ 注:optgroup 无法扶正 /

/ 重置表格元素 /
table { border-collapse: collapse; border-spacing: 0; }
而我在腾讯webteam中看到一篇文章《border:none;与border:0;的区别》中提到

使用CSS控制打印页面格式

之前做地图打印页面的时候,经理要求打印时候把打印的按钮去掉。这个时候就用到了控制打印样式表了。
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />

正因为xhtml和css是分离的,所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更多考虑到打印显示效果的需求,良好的扩展标记和结构嵌套,使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了,你象设置word一样去写你想打印的页面吧。
后来想了想,其实单独写一个css增加了请求次数,就想到了@media print{}的作用,代码如下

@media print{
 .printdesc
{
    right: 0;
    width: 685px;
    height: 69px;
    background-color: #FFFFFF;
    float:left;
    overflow:auto;
    border:0px;
}
.text{
    float:right;
    width: 688px;
    margin-top:20px;
}
.printlink{
    height:0px;
    display:none;
    width:0px;
    z-index:-10;

}
.printlink a{
    display:none;
}
}

后来想到如果打印页面的某一部分,可以使用iframe来进行操作,现在的打印页面的局部内容基本上就是使用iframe进行处理的~特此记录一下