本文目录一览：
- 1、css安全问题
- 2、css hacks什么意思
- 3、让电脑像黑客帝国一样滚绿码
- 4、我要黑客帝国里的数字流星雨代码，用html或asp写的
- 5、CSS使用的问题
- 6、css hacker是怎么回事？以及css如何才能兼容各浏览器？谢谢
css安全问题
随着前端技术的发展,安全问题已经从服务器悄然来到了每一个用户的的面前，盗取用户数据, 制造恶意的可以自我复制的蠕虫代码,让病毒在用户间传播,使服务器当掉. 更有甚者可能会在用户不知觉得情况下,让用户成为攻击者,这绝对不是骇人听闻。富客户端的应用越来越广，前端的安全问题也随之增多,今天就简单介绍下一些常见的攻击方式和预防攻击办法。
常见攻击
XSS (Cross Site Script) ，跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入的恶意html代码会被执行，从而达到恶意用户的特殊目的。XSS属于被动式的攻击，因为其被动且不好利用，所以许多人常呼略其危害性。但是随着前端技术的不断进步富客户端的应用越来越多，这方面的问题越来越受关注。举个简单例子 ： 假如你现在是sns站点上一个用户，发布信息的功能存在漏洞可以执行js 你在 此刻输入一个 恶意脚本，那么当前所有看到你新信息的人的浏览器都会执行这个脚本弹出提示框 （很爽吧 弹出广告 ：）），如果你做一些更为激进行为呢 后果难以想象。
CSRF(Cross Site Request Forgery)，跨站点伪造请求。顾名思义就是 通过伪造连接请求在用户不知情的情况下，让用户以自己的身份来完成攻击者需要达到的一些目的。csrf 的攻击不同于xss csrf 需要被攻击者的主动行为触发。这样听来似乎是有“被钓鱼”的嫌疑哈哈。
多窗口浏览器这这方面似乎是有助纣为虐的嫌疑，因为打开的新窗口是具有当前所有会话的，如果是单浏览器窗口类似ie6 就不会存在这样的问题，因为每个窗口都是一个独立的进程。举个简单例子 ： 你正在玩白社会， 看到有人发了一个连接，你点击过去，然后这个连接里面伪造了一个送礼物的表单，这仅仅是一个简单的例子，问题可见一般。
cookie劫持，通过获取页面的权限，在页面中写一个简单的到恶意站点的请求，并携带用户的cookie 获取cookie后通过cookie 就可以直以被盗用户的身份登录站点。这就是cookie 劫持。举个简单例子： 某人写了一篇很有意思的日志，然后分享给大家，很多人都点击查看并且分享了该日志，一切似乎都很正常，然而写日志的人却另有用心，在日志中偷偷隐藏了一个对站外的请求,那么所有看过这片日志的人都会在不知情的情况下把自己的cookie 发送给了 某人，那么他可以通过任意一个人的cookie 来登录这个人的账户。
我们该怎么做？
大致可以分为两类 1 一般用户 2网站开发人员。
首先我们来说说做为一个一般的web产品使用者，很多时候我们是被动的，是在不知情的情况下被利用的。那么我们可以：
1 对于安全级别较高的web应用访问 需要打开一个独立浏览器窗口。
2 对于陌生人发布的链接最好也是复制然后在新开的窗口中打开，当然最好的办法就是无视 – -。
对于开发人员来说我们得从相对详细的一些角度来分析：
对于xss 攻击 特点是攻击者的代码必须能获取用户浏览器端的执行权限，那么代码是从哪里来的呢，想要杜绝此类攻击出现 其实可以在入口 和出口 进行严格的过滤，这样的双保险应当说99% 的类似问题就被我们解决掉了，另外的1% 是那些蹩脚的浏览器带来的后遗症，相信在未来这种问题会越来越少的。
这里我对xss漏洞的形式作了一些整理
恶意代码值被作为某一标签的内容显示 （如果输入的是html 则html会被解析）例如你输入用户名 更新后用户名会显示到页面中的某一个标签内 如果你输入的是
popper.w＜script src="hack.js" type="text/javajscript"＞＜/script＞
那么如果不做过滤直接显示到页面， 会引进一个第三方的js 代码并且会执行。
策略：在不需要html输入的地方对html 标签 及一些特殊字符( ” ＜ ＞ 等等 )做过滤，将其转化为不被浏览器解释执行的字符
恶意代码被作为某一标签的属性显示（通过用 “ 将属性截断来开辟新的属性 或恶意方法） 这种情况往往是是开发人员为了实现功能可能会在某些dom标签上记录一些用户输入的信息例如你输入的用户名 会在页面中的标签中以 title 的形式出现 这时候 如果 你输入的是精心设计的内容 那么 看看 这个
＜a title="popper.w" onclick="alert(1)"＞popper.w" onclick="alert(1)＜/a＞
这里我实际上输入的内容是“popper.w” onclick=”alert(1)”，当然你可以在上边写更多的内容。
策略：对属性中可能存在截断的一些字符进行过滤 属性本身存在的 单引号和双引号都需要进行转码。
恶意代码被作为html代码本身显示 (常见的html编辑器) 这种情况存在的问题最多，不再这里举例子了。
策略：最好对用户输入的html 标签及标签属性做白名单过滤，也可以对一些存在漏洞的标签和属性进行专门过滤。
恶意代码被作为一段json字符串显示 （通过 变量截断 创造新的 恶意的js 变量 甚至是可执行的代码） 这个问题的关键是用户输入的信息可能会成为页面中js 代码的一部分。
策略：对属性中可能存在截断的一些字符进行过滤 属性本身存在的 单引号和双引号都需要进行转码。
对于crsf 和cookie 劫持
特点 隐蔽性比较高 有些时候是先利用xss 漏洞 然后再做 欺骗的
策略
通过 referer、token 或者 验证码 来检测用户提交。
尽量不要在页面的链接中暴漏任何与用户唯一号（用户id）有关的信息。
对于用户修改 删除 提交的操作最好都使用post 操作 。
避免全站通用的cookie 严格的设置cookie的域。
ok 就写到这里~
上边讲的都是一些比较常见的安全问题，主要是从js hack 方面来讲的，随着前端技术的不断发展进步，更多的安全问题可能会展现在我们面，对于开发者来说大多数的问题是可以在开发阶段避免的，所以可怕的不是hack 可怕的是我们对自己的产品安全的松懈
css hacks什么意思
为了解决不同浏览器之间 CSS 支持的不同, CSS Hacks 诞生了.
CSS Hack 在用CSS的几点:
1. 有效. 能够通过 Web 标准的验证.
2. 只针对太古老的/不再开发的/已被抛弃的浏览器. 而不是目前的主流浏览器.
3. 代码要丑陋. 让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉.
你把他们当成是网络黑客一样，只是对象是处理CSS就行了。
让电脑像黑客帝国一样滚绿码
这种代码确实有，我曾经用过！就是cmd批处理代码，也可以其他语言，如果用其他语言编写没你说那个绿色字幕啥的，不管是什么代码写的都是那种清理垃圾！绿色的滚码也挺酷酷的！
别听别人瞎说，他们没有见识，我七年前就玩过这个cmd清理垃圾批处理。现在清理垃圾用杀毒软件就可以做到！没必要这种特技炫酷的！其实你玩其他也可以的，比如你真正的学一门黑客技术
我要黑客帝国里的数字流星雨代码，用html或asp写的
htmlstyle type="text/css"
!--
body {
background-color: #000000;
}
--
/style
Body
script language="JavaScript"
!--
if (document.all){
Cols=60;
Cl=20;//Space's are included so real length is 48!
Cs=20;
Ts=20;
Tc='#008800';
Tc1='#00ff00';
MnS=20;
MxS=30;
I=Cs;
Sp=new Array();S=new Array();Y=new Array();
C=new Array();M=new Array();B=new Array();
RC=new Array();E=new Array();Tcc=new Array(0,1);
document.write(" div id='Container' style='position:absolute;top:0;left:-"+Cs+"'");
document.write(" div style='position:relative'");
for(i=0; i Cols; i++){
S[i]=I+=Cs;
document.write(" div id='A' style='position:absolute;top:0;font-family:Arial;font-size:"
+Ts+"px;left:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden' /div");
}
document.write(" /div /div");
for(j=0; j Cols; j++){
RC[j]=1+Math.round(Math.random()*Cl);
Y[j]=0;
Sp[j]=Math.round(MnS+Math.random()*MxS);
for(i=0; i RC[j]; i++){
B[i]='';
C[i]=Math.round(Math.random()*1)+' ';
M[j]=B[0]+=C[i];
}
}
function Cycle(){
Container.style.top=window.document.body.scrollTop;
for (i=0; i Cols; i++){
var r = Math.floor(Math.random()*Tcc.length);
E[i] = ' font color='+Tc1+''+Tcc[r]+' /font';
Y[i]+=Sp[i];
if (Y[i] window.document.body.clientHeight){
for(i2=0; i2 Cols; i2++){
RC[i2]=1+Math.round(Math.random()*Cl);
for(i3=0; i3 RC[i2]; i3++){
B[i3]='';
C[i3]=Math.round(Math.random()*1)+' ';
C[Math.floor(Math.random()*i2)]=' '+' ';
M[i]=B[0]+=C[i3];
Y[i]=-Ts*M[i].length/1.5;
A[i].style.visibility='visible';
}
Sp[i]=Math.round(MnS+Math.random()*MxS);
}
}
A[i].style.top=Y[i];
A[i].innerHTML=M[i]+' '+E[i]+' ';
}
setTimeout('Cycle()',20)
}
Cycle();
}
// --
/script
/body
/html
演示地址：
网上找的代码，我给你改了下
CSS使用的问题
分享：CSS使用技巧20则
1. CSS字体属性简写规则
一般用CSS设定字体属性是这样做的：
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
p class="text side".../p
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
3. CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /
link type="text/css" rel="stylesheet" href="printstyle.css" media="print" /
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
h1img src="widget-image.gif" alt="Buy widgets" //h1
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
h1Buy widgets/h1
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box
{
width: 100px;
border: 5px;
padding: 20px
}
这样调用它：
div id="box".../div
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box
{
width: 150px
}
#box div
{
border: 5px;
padding: 20px
}
这样调用：
div id="box"div.../div/div
这样，不管什么浏览器，宽度都是150点了。
7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content
{
width: 700px;
margin: 0 auto
}
你会使用 div id="content" 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：
body
{
text-align: center
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto
}
这会把网页内容都居中，所以在Content中又加入了
text-align: left 。
8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container
{
position: relative
}
这样容器内所有的元素都会相对定位，可以这样用：
div id="container"div id="navigation".../div/div
如果想定位到距左30点，距上5悖�梢哉庋�?BR
#navigation
{
position: absolute;
left: 30px;
top: 5px
}
当然，你还可以这样：
margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
10. 直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation
{
background: blue;
width: 150px
}
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？
不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body
{
background: url(blue-image.gif) 0 0 repeat-y
}
此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
11. Block和inline元素对比
所有的HTML元素都属于block和inline之一。block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
div, p, h1, form, ul 和 li是块元素的例子。相反地，inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
span, a, label, input, img, strong 和em是inline元素的例子。
用code class="inline"display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
12. 再来一个box黑客方法
之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。
13. 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个div 放到 body 标签下，然后为div指定一个类：
body
div class="container“
然后CSS这样设计：
#container
{
min-width: 600px;
width:expression(document.body.clientWidth 600? "600px": "auto" );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
同样的办法也可以为IE实现最大宽度：
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth 600? "600px" : document.body.clientWidth 1200? ”1200px“ : ”auto");
}
14. IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
.box
{
width: 80px;
height: 35px;
}
htmlbody .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。
5. 字体变形命令
text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。
16. IE中图片文字消失的问题
有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定一个宽度试试。
17. 不可见文字
不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。
这实际上是把文字指定在页面以外显示。
18. 为手持设备设计专门的CSS
也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：
link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" /
也可以阅读专门的手持设备可用性。
19. 3D效果的按钮
以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：
a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
至于效果，还可以自己调整了。
20. 在不同页面上使用同样的导航代码
许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。
首先，在导航代码中使用CSS类：
ul
lia href="#" class="home"Home/a/li
lia href="#" class="about"About us/a/li
lia href="#" class="contact"Contact us/a/li
/ul
然后分别为每一页的Body指定一个id，和上面类同名。如body id="contact"。
然后设计CSS如下：
#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}
这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。
css hacker是怎么回事？以及css如何才能兼容各浏览器？谢谢
css hacker是为了处理css在不同浏览器之间的兼容性问题而产生的，但是css hacker我们应该尽量少用，以优化我们的前端性能。
常见css兼容问题：1.clear:both;不想受到float浮动的影响，就在样式中写入clear:both;2. IE浮动 margin 产生的双倍距离#box {float:left;width:100px;margin:0 0 0 100px; /*这种情况之下IE会产生200px的距离*/display:inline; /*使浮动忽略*/3. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值先定义 ul {margin:0;padding:0;}4.鼠标手指状显示全部用标准的写法 cursor: pointer;5 IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽高度是比较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}htmlbody #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}6.关于min,max中的ie兼容 /*min-width,max-width,min-height,max-height等对非ie有效，对ie无效;*//*类似expression(document.body.clientWidth 200? "200px": "auto",document.body.clientWidth 300? "300px": "auto" )等表达式等对ie有效，对非ie无效;*/#container{ min-width: 200px; max-width:300px;width:expression(document.body.clientWidth 200? "200px": "auto",document.body.clientWidth 300? "300px": "auto" );height:200px;background-color:#F00;}7.关于浏览器的私有属性text-overflow:ellipsis;-o-text-overflow:ellipsis;-icab-text-overflow: ellipsis;-khtml-text-overflow: ellipsis;-moz-text-overflow: ellipsis;-webkit-text-overflow: ellipsis; 别兴奋了，该支持的都支持，其他都是骗小朋友滴。基本非IE的浏览器的私有属性都会以-xxx-这样开始，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。并不是说像-moz-text-overflow现在有用，而是 一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私 有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用8.关于_、*、!importantIE、Firefox、Opera和Safari对CSS样式important和*的支持1、IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持2、IE7、IE8、Firefox、Opera、Safari都支持 !important3.IE系列浏览器可读[\9](ie6+可读)，而IE6和IE7可读[*]，IE7可读+，另外IE6及以下可辨识[ _ ](下划线);顾名，important的优先级要高. 举例说明：style type=”text/css”body{background-color:#FF0000 !important;*background-color:#00FF00 !important;*background-color:#0000FF;background-color:#000000;}/styleIE6选择最后一个，即：background-color:#000000; （因为IE6对important不感冒）IE7选择第二个，即：background-color:#000000;（因为IE7开始对important感冒了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全感冒于important，同时丢弃了对*的感情）另外再补充一个，下划线 "_",IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。设置样式的顺序如下：p.ie{height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;color:blue; // 所有浏览器color:brown\9; // 所有IE浏览器+color:red; // IE7_color:green; // IE6}其他css兼容技巧：1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 8，html控件除了指定id，还应该加上name属性;9,alt只能在ie下识别，FF和其它浏览器必须加title;10,如果想按px指定宽度和高度，数字后后要带”px”,IE默认为px，但FF不识别;11,设置表格border宽度，但看起来还是很宽，要加上style="border-collapse:collapse";