1.alpha属性:
alpha属性用来设置透明度。
Filter: alpha (opacity=opacity, finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)
opacity表示透明度等级（0~100）
finishopacity用来设置结束明的透明度
startX和startY表示渐变透明效果的开始坐标
finishX和finishY表示渐变透明效果的开始坐标
2.blur属性
blur属性用来设置模糊效果。
filter: blur(add=true、flase,direction,strength=strength)
add指定图片是否变成模糊效果
direction参数用来设置模糊的方向（0、45、90、135、180、225、270、315）
strength代表有多少像素的宽度将受到模糊影响（默认是5）
3.chroma属性
chroma属性设置一个对象中指定的颜色为透明色。
filter: chroma(color=color)
4.dropshadow属性
dropshadow属性用来添加对象的阴影效果。
filter: dropShadow(Color=color,Offx=offx,Offy=offy,Positive=positive)
Color表示投射阴影的颜色
Offx、Offy分别表示在X方向和Y方向阴影的偏移量（整数表示 ......
由于各浏览器的默认CSS样式不一样，我们必须写一个CSS Reset统一起来。
通常我的做法是在common.css里写全局控制，这里面也包括header和footer，其它CSS文件就通过@import url(”common.css”);引用。
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Arial;}
form,ul,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;list-style:none;}
input,textarea,select,button{font-size:12px;}
img{border:none;}
address,cite,small{color:#999;font-style:normal;font-size:12px;}
a{color:#09c;text-decoration:none;}
a:hover{text-decoration:underline;}
#header{...}
#footer{...} ......
png透明 AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)
enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true：默认值。滤镜激活。false：滤镜被禁止。
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop：剪切图片以适应对象尺寸。image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
firefox不能对innerText支持
firefox支持innerHTML但却不支持 innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。
禁止选取网页内容
在IE中一般用js：obj.onselectstart=function() {return false;}
而firefox用CSS:-moz-user-select:none
滤镜的支持(例：透明滤镜)
IE:filter：alpha(opacity=10);
firefox：-moz- opacity:.10;
捕获事件
IE：obj.setCapture() � ......
当连续输入英语字符后，由于浏览器默认为一个单词，并不会换行处理，在IE6/IE7 中，我们可以添加css中的word-wrap 属性，实现自动换行。但是在IE8 版本中，该属性不支持。
我们可以采用判断浏览器版本后，使用JavaScript进行换行。
if ($.browser.mozilla) {
strContent = toBreakWord(strContent, 87);
}else if($.browser.msie&&($.browser.version == "8.0")){
strContent = toBreakWord(strContent, 87);
}
换行处理的函数为：
// 通过JavaScript实现英文长字符串换行
function toBreakWord(content, intLen) {
var strContent = content;
var strTemp = "";
while (strContent.length > intLen) {
strTemp += strContent.substr(0, intLen) + " ";
strContent = strContent.substr(intLen, strContent.length);
}
strTemp += " " + strContent;
return strTemp;
}
其中，content为需要换行处理的字符串，in ......
第一种，是CSS HACK的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种是使用IE专用的条件注释
<!-- 其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
< ![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
< ![endif]-->
第三种css filter的办法，以下为经典从国外网站翻译过来的。
新建一个css样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
<div id="item">some text here</div>
在body表现这里加入lang属性,中文为zh：
<body lang="en">
现在对di ......
很早就在这里看到过解决方案，与嗷嗷讨论后发现这个方案还是很可靠的。当然，唯一的缺点就是每一个属性都要去Hack，但我在很多实践中，只用‘修正’1-2个属性就可以了。
具体写法很容易：
#someNode
{
position: fixed;
#position: fixed;
_position: fixed;
}
第一排给Firefox以及其他浏览器看
第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看
第三排给IE6以及更老的版本看
最好的应用就是可以让IE6也“支持”position:fixed，而且，配合这个原理，可以做到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS如下写：
#ff-r
{
position: fixed;
_position: absolute;
right: 15px;
top: 15px;
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop+15 :
document.body.scrollTop +
(document.body.clientHeight
-this.clientHeight));
}
是不是很方便：）
本文来自：http://www.awflasher.com/blog/archives/1080
......
最新文章 : css