读《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下会自动撑开这个高度,无需设置最小高度

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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论