div+css兼容
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事, 这里 收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
1． 兼容三个浏览器的
width: 100px!important; /* IE7+FF */
_ width: 100px /* IE 6 */
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#leo {width:500px; height:500px; _ background:red;} /* moz */
*html #leo {background:yellow;} /* ie6 */
*+html #leo {background:blue;} /* ie7 */
-->
</style>
</head>
<body>
<div id="leo">#leo { width:500px; height:500px; background:red;} /* moz */<br />
*html #leo {background:yellow;} /* ie6 */<br />
*+html #leo {background:blue;} /* ie7 */</div>
</body>
</html>
2． margin加倍的问题
在一个样式里面同时用float:left; margin-left:5px; 在ie6和ie7浮动的有错位问题；
解决方案：加上 display： display:inline
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.box {
font-size: 12px;
background-color: #CCCCCC;
padding: 10px;
width: 400px;
border: 1px solid #000000;
}
.float {
background-color: #999999;
height: 100px;
width: 100px;
float: left;
border: 4px solid #333333;
margin: 25px;
display: inline;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="float">浮动元素</div>
</div>
</body>
</html>
3． div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了 。缺点是要控制内容不要换行
4 . IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对 css 使用line-height属性或者给 css 使用固定高和宽。页面结构尽量简单。
清除浮动也是经常使用的办法；
技巧：
1. 定义背景颜色和背景图片加 display：block;
2. 在对某个DIV高/宽不足10像素进行设置时，要设overflow: hidden;
3. 制作绝对宽度但高度自适应的div，除了可以用overflow: hidden;的方式外，还可以在div底部加上清除二者.clear {clear: both;}
4. logo图片带链接，去掉图片周围的边线，整站的图片样式可以设置为：img {border: 0;}
5. 在设置定位坐标值的时候，只能设置二个值，并且不能冲突(top: 10px;bottom: 10px;这是冲突，不允许！)
6. 块水平居中 margin:0 auto; line-height 和height的值设为一样垂直居中
7. 隐藏 Exploer textarea 的滚动条 textarea {overflow:auto;}
Exploer 默认情况下 textarea 会有垂直滚动条
8．连接样式： a:link a:hover a:visited a:active 顺序不能改变
#link a:link {
color: red;
}
/*-- 初始化的状态 --*/
#link a:hover {
color: blue;
}
/*-- 鼠标滑过时的状态 --*/
#link a:visited {
color: #ccc;
}
/*-- 已访问过的状态 --*/
#link a:active {
color: #fff;
}
/*-- 鼠标按下时的状态 --*/
9．li 默认有3像素的向右浮动； 通常设置：padding：0； margin：0；
10．制作新页面的时候，写些综合样式。对其他页面同时适合的样式；
@charset "gb k ";
body { margin:0 auto; font-size:12px; font-family: "宋体";}
ul{ padding:0; margin:0; list-style-type:none;}
li{ list-style-type:none;}
form{ margin:0;padding:0;}
img {border:0;}
.bold{ font-weight:bold;}
a:link{ color:#000000; text-decoration:none;}
a:hover{color:#A02223;text-decoration:underline;}
a:visited{ color:#000000; text-decoration:none;}
a:active{ color:#000000; text-decoration:none;}