读《div+css 布局下兼容IE6 IE7 FF常见问题》一文的总结

作者: 坎肩儿分类: HTML+CSS 发布时间: 2009-12-01 13:40

注意点：固定高度，IE6下会撑破，IE7、FF下则不会

一、IE6,IE7,FF特定标签：

*html：IE6
*+html：IE7

代码：

<style type=”text/css”>
#wrapper { width:200px; border:1px #FF0000 solid;}
*html #wrapper { width:100px; border:1px #FF0000 solid;}
*+html #wrapper { width:50px; border:1px #FF0000 solid;}
</style>

效果：FF下宽度为200px，IE6下100px，IE7下50px，为了看到效果加1px的边框。

注意: *+html 对IE7的兼容必须保证HTML顶部有如下声明：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

二、兼容技巧：

1、垂直居中：将 line-height 设置为当前div相同的高度(经亲测IE6,IE7,FF下面不加后面那句也可实现), 再通过 vertical-align:middle; (注意内容不要换行，这点很重要)

2、水平居中：margin:0 auto;(不是万能)

3、给 a 标签加样式需设置：display:block;

4、ul标签在FF下默认有 list-style 和 padding，最好事先声明

以上综合实例代码：

<!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>马佳的博客-CSS学习笔记</title>
<style type=”text/css”>
/*定义全局*/
* { margin:0; padding:0;}
/*主体开始*/
#menu {
width:500px;
height:30px;
font-size:12px;
text-align:center; /*内容居中*/
margin:0 auto; /*水平居中*/
line-height:30px; /*垂直居中*/
border:1px #FF0000 solid;
}
#menu ul {
list-style:none; /*兼容FF浏览器*/
padding:0; /*兼容FF浏览器*/
}
#menu ul li {
float:left;
width:100px;
}
a:link,a:visited {
color:#000000;
}
a:hover {
background-color:#00CCFF;
display:block; /*给 a 标签内容加样式*/
color:#FF0000;
}
</style>
</head>
<body>
<div id=”menu”>
<ul>
  <li><a href=”http://www.pksafe.cn” target=”_blank”>首页</a></li>
  <li><a href=”http://www.pksafe.cn/about“>关于我们</a></li>
  <li><a href=”http://www.pksafe.cn“>项目开发</a></li>
  <li><a href=”http://www.pksafe.cn“>留言簿</a></li>
</ul>
</div>
</body>
</html>

5、手形光标：cursor:pointer; 而 hand 只适用于IE

6、浮动后IE6的双倍边距BUG(读这篇文章前是个棘手的问题,在此感谢下作者)

代码：

<style type=”text/css”>
body {
margin:0;
padding:0;
}
#wrapper {
margin-left:10px;
float:left;
display:inline; /*解决IE6下浮动后双倍边距的BUG*/
border:1px #FF0000 dashed;
width:100px;
height:20px;
}
</style>

浮动后本来外边距10px，但IE6解释为20px，解决办法加：display:inline;

7、IE7、FF下文本无法撑开容器的高度，IE6下则可以，那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉 height 设置 min-height:200px; 这里为了照顾不认识 min-height 的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px; }

      代码解释：
     height:auto!important; min-height:200px; IE7,FF下高度自动，最小高度200px，IE6不识别
     height:200px; IE6识别的高度200px，IE6下会自动撑开这个高度，无需设置最小高度

目前先整理这些，原文中有部分还没有实践过，等有项目的时候具体实践之后再整理出来。

div+css