1，ul：默认的ul的margin和padding不是0，如果在导航中用到了左浮动的li，往往会把外部的div撑大，导致页面变形，这就需要我们在写代码的时候不要忘记：
ul{margin:0px; padding:0px;}
2，img：关于图片，有时ie6里显示的图片height总是要大于准确值，这里就需要我们记住下面这一点：
img{ display：block}。还有页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些大的网站，现在都尽量把背景统一放到一张图片上，用background-postion来取得背景，这样其实也好，背景虽然大了点，但只需统一加载一次，就ok了，速度也不会太慢。图片最好的格式就是gif格式，即确保了背景透明，在ie6中又不会有阴影，有时gif图片会有锯齿，这就需要我们保存成web格式，设置一下matter，matter的值与背景颜色的值越相近越好。（当然有时迫不得已png的图片也可以）
3，overflow：有时我们会看到，一些公司的注册协议都是好长好长的，但又不能把页面拉的太长，这就用到了overflow，我们可以把div的style里加上这个：overflow：auto;
4，小窗口弹出：当我们点击某个按钮，可能会看到一个小窗口弹出，而窗口其它的部分都变了灰色，这是怎么实现的呢，其实很简单div+css就可以实现：
css部分：
.black_overlay
{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=50);
}
.white_content
{
display: none;
position: absolute;
top:20%;
left: 30%;
width:outo;
background-color: white;
z-index: 1002;
overflow: auto;
}
.white_content2
{
display: none;
position: absolute;
top: 20%;
left: 18%;
width:896px;
background-color: white;
z-index: 1002;
overflow: auto;
text-align: center;
}
.qpshcom
{
background-color: #efefef;
color: #666666;
border-width: 1px;
border-color: #cccccc;
border-style: solid;
margin: 6px;
padding: 6px;
font-size: 14px;
line-height: 200%;
float: midden;
} div部分：
打开按钮部分：
(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”
关闭按钮部分：onclick=”document.getElementById
(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”
4，float：有时候一些div会挤到页面的上方，把页面挤破，这里可能就是浮动引起的，这时候我们就用到这个：clear：both，很不错的解决方法，不妨一试。
5，height等于1px的div，在ie6中可能并不是1px，那怎么解决呢？不妨试一下：在这个div的style里加上font-size：1px;这样就ok了。
6，id和class：当一个div要在页面中多次使用时，不要用id，要用class，还有就是要用引用js的时候，样式最好不要用id，因为id要留给js使用，当程序员写后台用的是.net时，最好不用id，id要留给程序员用，前台我们就用class好了。
7，链接：
.link：link{}
.link：visited{}
.link：hover{}
.link：active{}
有一点，visited与hover的顺序一定不能倒换，否则ie6中会出现大大的问题。
8.超链接访问过后hover样式不出现?
被点击访问过的超链接样式不再具有hover和active的样式了, 解决方法是改变CSS属性的排列顺序: L-V-H-A
ps：好在自己一开始书写时就没有把这四种样式写全过，我只写 a:link ，a:hover ，一直也没出现什么问题，后来发现ie6下a:visited 和 ff下的颜色不一致，这才发现这一个问题。看来没有问题也不代表书写正确。
9.IE6的双倍边距BUG
例如:
<style type=”text/css”>
body {margin:0}
div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red; }
</style> 浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline;
10.为什么FF下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }
11.为什么web标准中IE无法设置滚动条颜色了?
原来样式设置：
<style type=”text/css”>
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; }
</style> 解决办法是将body换成html
12.为什么无法定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px;
13.怎么样才能让层显示在FLASH之上呢?
给FLASH设置透明:
<param name=”wmode” value=”transparent” />14.怎样使一个层垂直居中?
<style type=”text/css”>
<!–
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
–>
</style> 这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
ps:margin的值就是div宽度的1/2;
15， firefox中嵌套div标签，如何实现居中，假定有如下情况：
<div id=”a”> <div id=”b”> </div> </div>
如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在 Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。
希望对大家有用！
评论