1.【IE6对png图片支持】
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='bottom-fade.png',sizingMethod='scale') ;
注：不能使用于背景有定位属性的标记
2.【去除超链接外围虚线轮廓】
[a]
IE下：a href="#" ...
FF下: a{outline:none;}
注：当FF用使用了文字缩进(text-indent:-9999px)为负属性来隐藏a文本时,点击就会出现丑陋的虚线轮廓。
[b]
a, a:active {outline: none; }
3.【著名的 Meyer Reset（重置）】
http://meyerweb.com
*{padding:0;margin:0}尽量不要使用*号选择符像这样的得分会很低，正确的办法应该是只对你想设置的标签元素进行设置,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
4.【CSS hack】
!--[if IE] Only IE ![endif]--
所有的IE可识别
!--[if IE 5.0] Only IE 5.0 ![endif]--
只有指定版本可以识别
!--[if lt IE 7] Only IE 7- ![endif]--
只有指定版本以下的可识别
!--[if gt IE 6] Only IE 6+ ![endif]--
只有指定版本以上的可识别
!--[if lte IE 7] Only IE 7/- ![endif]--
指定版本或以下的都可识别
!--[if gte IE 6] Only IE 6/+ ![endif]--
指定版本或以上的都可识别
.test{
color:#00C; /* For IE5.5 */
voice-family:"\"}\"";
voice-family:inherit;
color:#000; /* For FF,OP */
[color:#000;color:#0F0; /* For SF,CH */
color:gray\9; /* For IE8 IE7 IE6*/
color:gray\0; /* only for IE8 */
*color:#FF0;color: #FF0; /* For IE7 IE6*/
_color:#F00;-color:#FF0;(color:#FF0; /* For IE6 */
}
通过以上的样式，你可以在IE5.5里看到蓝色的字，IE6里看到红色的字，IE7看到的是黄色的字，IE8看到的是灰色的字，Firefox/Opera看到的是黑色的字，Safari/Chrome看到的是绿色的字。这里没继续将Firefox和Opera，Safari和Chrome区分。
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7
t-
align:center; } div pp对象中的内容/p /div 解决方法：在P对象上下各加2个空的div对象
CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
12 .IE6下为什么图片下有空隙产生 解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
13.如何对齐文本与文本输入框 加上 vertical-align:middle; style type="text/css" !-- input { width:200px;
height:30px; border:1px solid red; vertical-align:middle; } -- /style
15. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器
style type="text/css" !-- li { width:200px; white- space:nowrap; text-overflow:ellipsis;
-o-text-overflow:ellipsis; overflow: hidden; } -- /style
18.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明 param value="transparent" /
FF与IE
1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元
素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景 a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照
menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到
过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
Code: style type="text/css" !-- a:link {} a:visited {} a:hover {} a:active {} -- /style
4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul
{margin:0;padding:0;}就能解决大部分问题
6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css
中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义
死了,所以后面就不会为这个头疼了.
7. BOX模型解释不一致问题 在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!
important;margin:28px;} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以
识别。所以在IE下其实解释成这样： div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只
写margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和
OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]
中,所有p标签中有id的都是同样式的.
9.最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,
然而IE则会忽略.如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important;
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; } 值得注意的是，一定要将xxxx !important
这句放置在另一句之上，上面已经提过
