先说下浏览器的内核问题
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
1、居中问题
格里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码：
margin: 0 auto;
2、高度问题
两上下排列或嵌套的格，上面的格设置高度（高度），如果DIV里的实际内容大于所设高度，在FF中会出现两个格重叠的现象;但在IE中，下面的格会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是身高：100％;但当这个div里面一级的元素都浮了的时候，则需要在格块的最后，闭和前加一个沉底的空DIV，CSS对应是：
.float_bottom {clear:both;
height:0px;
font-size:0px;
padding:0;
margin:0;
border:0;
line-height:0px;
overflow:hidden;
}
3、IE浮动边缘产生的双倍距离
#box { float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
4、填充问题
FF设置填充后，div会增加高度和宽度，但IE不会（*标准的XHTML1.0定义dtd好像一致了）高度控制恰当，或尝试使用高度：100％;宽度减少使用padding但根据实际经验，一般FF和IE的填充不会有太大区别，div的实际宽=宽度+填充，所以div写全宽和填充，宽度用实际想要的宽减去填充定义。
5、div嵌套时y轴上padding和marign的问题
FF里y轴上子div到父div的距离为父padding +子marign
IE里y轴上子div到父div的距离为父padding和子marign里大的一个
FF里y轴上父padding = 0且border = 0时，子div到父div的距离为0，子marign作用到父div外面
6、填充，marign，高度，宽度的傻瓜式解决技巧**
注意是技巧，不是方法：
写好标准头
<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns =“http://www.w3.org/1999/xhtml”>
高尽量用填充，慎用余量，高度尽量补上100％，父级高度有定值子级高度不用100％，子级全为浮动时底部补个空明确：两者的格宽尽量用余量，慎用填充物，宽度算准实际要的减去填充
7、列表类
1\. ul标签在FF中默认是有padding值的，而在IE中只有margin有值
先定义ul {margin：0; padding：0;}
2\. ul和ol列表缩进问题消除ul，ol等列表的缩进时，样式应写成：{
list-style：none;
margin：0px;
padding：0px;
}
8、显示类（显示：块，内联）
1.显示：块，内联两个元素
显示：块; //可以为内嵌元素模拟为块元素
显示：内联; //实现同一行排列的的效果
显示：表; //对于FF，模拟表的效果
display：块块元素，元素的特点是：
总是在新行上开始;高度，行高以及顶和底边距都可控制;宽度缺省是它的容器的100％，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul>和<li>是块元素的例子
display：inline就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上;高，行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度，不可改变。 <span>，<a>，<label>，<input>，<img>，<strong>和<em>是内联元素的例子
2.鼠标手指状显示
全部用标准的写法游标：指针;
9、背景，图片类
1. background显示问题
全部注意补齐width，height属性
2.背景透明问题
IE：filter：progid：DXImageTransform.Microsoft.Alpha（style = 0，opacity = 60）;
IE：filter：alpha（opacity = 10）;
FF：不透明度：0.6;
FF：-moz-opacity：0.10;
最好两个都写，并将透明度属性放在下面
10、最小高度最小高度的实现（兼容IE6，IE7，FF）
作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
#mrjin { background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}
11、着名的Meyer Reset（重置）
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;
}
:focus { outline: 0;
}
body { line-height: 1;
color: black;
background: white;
}
ol,ul { list-style: none;
}
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: "" "";
}
12、跨浏览器的CSS透明度
.transparent {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
13、文字阴影（CSS3）
.text { text-shadow: 1px 1px 1px #666;
filter: Shadow(Color=#666666, Direction=135, Strength=5);
}
14、盒阴影（CSS3）
.box { box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
}
15、Sticky Footer（让页脚永远停靠在页面底部，而不是根据绝对位置）
<div id="wrap">
<div id="main" class="clearfix"></div>
</div>
<div id="footer"> </div>
16、为什么网络标准中无法设置IE浏览器滚动条颜色了？
body { scrollbar-face-color: #f6f6f6;
scrollbar-highlight-color: #fff;
scrollbar-shadow-color: #eeeeee;
scrollbar-3dlight-color: #eeeeee;
scrollbar-arrow-color: #000;
scrollbar-track-color: #fff;
scrollbar-darkshadow-color: #fff;
}
原来样式设置：
解决办法是将车身换成HTML。
17、为什么中火狐浏览器下文本无法撑开容器的高度？
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的，那我又想固定高度，又想能被撑开需要怎样设置呢办法就是去掉高度设置最小高度：200像素; 这里为了照顾不认识min-height的IE6可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }
18、如何定义1px的左右高度的容器？
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多
例如：overflow：hidden | zoom：0.08 | 行高：1px的
19、怎么样才能让层显示在FLASH之上呢？
解决的办法是给FLASH设置透明：
<a href=" [http://www.chinaz.com/">：</ a](http://www.chinaz.com/%22%3E:%3C/a) >
<pre lang =“html”line =“1”>
<param name =“wmode”value =“transparent”/>
20、怎样使一个DIV层居中于浏览器中？
首先，需要这两个层都是兄弟关系，其次，这两个层都需要绝对定位举个例子：
div { position: absolute;
top: 50%; left: 50%;
margin: -100px 0 0 -100px;
width: 200px; height: 200px;
border: 1px solid red;
}
21、怎样使DIV背景透明？
body {
font: normal 12px/30px Verdana;
}
#test {
position: relative;
width: 400px;
height: 50px;
}
#inner {
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
width: 380px;
height: 30px;
color: #003;
font-weight: bold;
text-align: center;
}
#transbox {
z-index: 1;
position: absolute;
top: 0px; left: 0px;
width: 400px;
height: 50px;
background: #eef;
border: 1px solid #a00;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
22、怎样去掉选中时的虚线框？
利用onfocus =“this.blur（）;”例如：<a href="#" onfocus="this.blur();">测试</a>
23、IE6下PNG背景显示问题？
针对IE6下PNG背景显示问题，CSS中可以这样解决：
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http: //www.0351zhuangxiu.com/uploads/images/bj.jpg’);
24、文字与表单对齐方法？
设置表单元素第一字体为Tahoma（Verdana系列也可），并设置vertical-align：middle。建设大家把这个约定写入CSS RESET中，能减小很多麻烦：
body,button,input,select,textarea{
font:12px/1.5 tahoma,arial,sans-serif;
vertical-align:middle
}
25、OPTGROUP标签的用法？
OPTGROUP标签，鲜为人知，它对提升选择表单用户体验很有帮助就是可以在有很多选项时，对这些选项分组：例子：
<select id =“selectId”>
<optgroup label =“GROUP ONE”>
<option value =“1”>一个选择</ option>
<option value =“2”>两个选择</ option>
</ OPTGROUP>
<optgroup label =“GROUP TWO”>
<option value =“3”>三选</ option>
<option value =“4”>四选</ option>
</ OPTGROUP>
</选择>
26、文字与图片垂直居中对齐方法？
为图片与文字的共同父元素所有的后代元素定义* {垂直对齐：中间};例如：
<p>我要的坚强<img src =“i / image.gif”/> </ p>
只需定义P * {垂直对齐：中间}即可使文字与图片同行垂直居中。
27、文章标题列表中日期居右显示的两种方法？
方法甲相对方法乙省资源，但比方法乙要多写两句代码，使用时请视情况而定：
方法一：
<P>这是文章标题<跨度> 2010-10-10 </跨度> </ p>
然后定义p和跨度的样式：
p {position：relative}
p span {position：absolute; 右：0}
方法B：
<P> <跨度> 2010-10-10 </跨度>这是文章标题</ P>
然后定义跨度右浮动：
p span {float：right}
28、IE6下最大/最小宽度/高度实现？
ie6下max / min-width / height实现，_ width：expression_r（this.width> 600？“600px”：true）;, height同理。
29、空白外边距互相叠加的问题？
一般通过添加透明边框或者1px的的内边距避免;
其一，为外围元素定义透明边框。具体到本例，即在样式div中加入border：1px solid transparent;
其二，为外围元素定义内边距填充..具体到本例，即在样式的div中加入填充：1px的;
例如：<！doctype html>
<HTML>
<HEAD>
<meta charset =“utf-8”>
<title>空白边距叠加[demo@Mr.Think </ title](mailto:demo@Mr.Think%3C/title) >
<风格>
体{宽度：300像素; FONT-FAMILY： '微软雅黑'; 字体大小：1em的; TEXT-INDENT：10px的; 行高：1.25}
DIV {背景：＃a40000;余量：10px的}
div p {background：#eee; margin：15px}
</样式>
</ HEAD>
<BODY>
<div> <p>空白边距叠加[demo@Mr.Think </ p> </ div](mailto:demo@Mr.Think%3C/p%3E%3C/div) >
</ BODY>
</ HTML>
30、网页设计中的默认字体
字体：12px / 1.5 Tahoma，Helvetica，Arial，sans-serif;
说明：line-height采用1.5，也就是18px。这是淘宝视觉规范中定义的行高，对于12px的字体，这个行高看起来很舒服.font家族默认采用宋体。宋体是英文的Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。
31、浏览器兼容 - 常用的css hack
/*第一种*/ .title { height: 200px; *height: 200px; _height: 200px;} /*第二种*/ .title { height: 200px; *height: 200px !important; *height: 200px;} /*第三种*/ .title { height: 200px;} *html.title { height: 200px;} *+html.title { height: 200px;}
