"firefox"下面简称为“ff”
这个列表示我3天以来深入制作一个XHTML项目时候遇到的。由于之前经验浅薄,所以肯定有很多不当之处,特别是有很多问题我都是之前然而不知其所以然!所以希望同志们就我这个总结批评一下我还有没有什么问题。
谢谢!
CSS 常见注意事项:
同时兼容IE、FF的基本注意事项
1、float的div一定要闭合。
例如:(其中floatA、floatB的属性已经设置为float:left;)
〈div id="floatA">〈/div>
〈div id="floatB">〈/div>
〈div id="NOTfloatC">〈/div>
这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
在
〈div id="floatB">〈/div>
〈div id="NOTfloatC">〈/div>
之间加上
并且将clear这种样式定义为为如下即可:
。clear
{
clear:both;
overflow:hidden;
}
2、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
〈div id="IamFloat">
相应的css为
#IamFloat
{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
3、关于容器的包涵关系
很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。
在IE中,外层的宽度会被内层更宽的div挤破。
一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)
(注:复制代码时请把“〈”改为英文格式下的“<”)