【多浏览器的兼容问题】IE6.0、IE7.0 、FireFox 在样式中的不同写法

wen66

浏览: 505488 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

cxy_boot

dddpeter

brucelovejava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

浏览器 Firefox IE CSS JavaScript

原文出处：http://www.xianzheng.net.cn/post/ie6-ie7-firefox-css-02.html
        参考文章：http://www.iteye.com/topic/602506

        或许你一直在抱怨为什么要专门为 IE 和 FF 写不同的 css，为什么 IE 这样让人头疼，然后一边写 css，一边咒骂那个可恶的MSIE。其实对于 css 的标准支持方面，IE并没有我们想象的那么可恶，关键在于 IE 和 FF 的默认值不一样而已，掌握了这个技巧，你会发现写出兼容 FF 和 IE 的 css 并不是那么困难，或许对于简单的 css，你完全可以不用 "!important" 这个东西了。

        我们都知道，浏览器在显示网页的时候，都会根据网页的 css 样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在 css 中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div 或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现 FF 和 IE 显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。所以解决办法就出来了，那就是对于不统一的默认显示方式，在 css 中给指定具体数值就可以了，下面我将就我知道的默认标签来进行说明。

        ● 列表标签 UL LI
        这个是朋友抱怨得最多的标签，说每次遇到这个标签的时候 IE 和 FF 总是显示不一致。行，既然如此，你何不在样式表中将这个标签的属性给定义了，如：

ul {
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

然后再看看，是不是一致了？对于 ul 标签，IE 会自动缩进几个像素，而 FF 则不是这样，所以这就是根本原因。当然，我上面的定义肯定显示不太美观，这个时候你可以手动进行调节，譬如调节成：

ul {
  padding: 0;
  margin: 0 0 0 10px;
  list-style-position: inside;
}

ul {
  padding: 0;
  margin: 0 0 0 10px;
  list-style-position: inside;
}

所以今后对于这个标签，只要你发现 IE 和 FF 不一致,就去看看对应的 css 有哪些属性，然后进行夸张的描述，用 IE 和 FireFox 查看之，如果一致则有效。FORM 标签，这个标签在 IE 中，将会自动 margin 一些边距，而在 FF 中 margin 则是 0，因此，如果想显示一致，所以最好在 css 中指定 margin 和 padding，针对上面两个问题，我的 css 中一般首先都使用这样的样式：

ul, form {
  margin: 0;
  padding: 0;
}

ul, form {
  margin: 0;
  padding: 0;
}

给定义死了，所以后面就不会为这个头疼了。

● 排版
对于排版，我们用得最多的 css 描述可能就是 float:left。有的时候我们需要在 n 栏的 float div 后面做一个统一的背景，譬如:

<div id="page">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>

比如我们要将 page 的背景设置成蓝色，以达到所有三栏的背景颜色是蓝色的目的，但是我们会发现随着 left center right 的向下拉长，而 page 居然保持高度不变，问题来了，原因在于 page 不是 float 属性，而我们的 page 由于要居中，不能设置成 float，所以我们应该这样解决：

<div id="page">
  <div id="bg" style="float: left; width:100%">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</div>

<div id="page">
  <div id="bg" style="float: left; width:100%">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</div>

再嵌入一个 float left 而宽度是 100% 的 DIV 解决之。

● !important
随着 IE7 对 !important 的支持, !important 方法现在只针对 IE6 的 HACK。(注意写法，记得该声明位置需要提前。)

<style>
  #wrapper {
    width: 100px!important; /* IE7 + FF */
    width: 80px; /* IE6 */
  }
</style>

<style>
  #wrapper {
    width: 100px!important; /* IE7 + FF */
    width: 80px; /* IE6 */
  }
</style>

● IE6/IE7 对 FireFox
*+html 与 *html 是 IE 特有的标签, firefox 暂不支持，而 *+html 又为 IE7 特有标签。

<style>
  #wrapper { width: 120px; } /* FireFox */
  *html #wrapper { width: 80px;} /* ie6 fixed */
  *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>

<style>
  #wrapper { width: 120px; } /* FireFox */
  *html #wrapper { width: 80px;} /* ie6 fixed */
  *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

● 万能 float 闭合(非常重要!)
将以下代码加入 Global CSS 中，给需要闭合的 div 加上 class="clearfix" 即可，屡试不爽。

<style>
  /* Clear Fix */
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    display: inline-block;
  }

  /* Hide from IE Mac */
  .clearfix {
    display: block;
  }
</style>

<style>
  /* Clear Fix */
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    display: inline-block;
  }

  /* Hide from IE Mac */
  .clearfix {
    display: block;
  }
</style>

        ● 其他兼容技巧(再次啰嗦)
        ① FF 下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会(可用 !important 解决)。
        ② css 布局中的居中问题，主要的样式定义如下：

body {
  text-align: center;
}
#center {
  margin-right: auto;
  margin-left: auto;
}

body {
  text-align: center;
}
#center {
  margin-right: auto;
  margin-left: auto;
}

说明：首先在父级元素定义 text-align: center; 这个的意思就是在父级元素内的内容居中。对于 IE 这样设定就已经可以了。但在 FF 中不能居中。解决办法就是在子元素定义时候设定时再加上 margin-right: auto; margin-left: auto; 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个 DIV 里，你可以依次拆出多个div，只要在每个拆出的 div 里定义 margin-right: auto; margin-left: auto; 就可以了。
        ③ 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
        ④ FF 和 IE 对 BOX 理解的差异导致相差 2px。还有，设为 float 的 div 在 ie下 margin 加倍等问题。
        ⑤ ul 标签在 FF 下面默认有 list-style 和 padding。最好事先声明, 以避免不必要的麻烦。(常见于导航标签和内容列表)
        ⑥ 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden，以达到高度自适应。
        ⑦ 关于手形光标，cursor: pointer。而 hand 只适用于 IE。

        ● 浮动 IE 产生的双倍距离

#box {
  float:left; width:100px; margin: 0 0 0 100px; // 这种情况之下 IE 会产生 200px 的距离
  display: inline; // 使浮动忽略
}

#box {
  float:left; width:100px; margin: 0 0 0 100px; // 这种情况之下 IE 会产生 200px 的距离
  display: inline; // 使浮动忽略
}

这里细说一下 block, inline 两个元素。block 元素的特点是: 总是在新行上开始，高度、宽度、行高、边距都可以控制(块元素)；inline 元素的特点是: 和其他元素在同一行上，高度、宽度、行高、边距不可控制(内嵌元素)。

● IE 中宽度和高度的问题
IE 不认得 min- 这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使用。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width 和 min-height 的话，IE 下面等于根本就没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box { width: 80px; height: 35px; }
html>body #box { width: auto; height: auto; min-width: 80px; min-height: 35px; }

● 页面的最小宽度
min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width 当做最小宽度。为了让这一命令在 IE 上也能用，可以把一个 <div> 放到 <body> 标签下，然后为 div 指定一个类：

// 第一个 min-width 是正常的；但第 2 行的 width 使用了 javascript，这只有 IE 才认得，
// 这也会使你的 HTML 文档显得不太正规。它实际上通过 javascript 的判断来实现最小宽度。
#container {
  min-width: 600px;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

// 第一个 min-width 是正常的；但第 2 行的 width 使用了 javascript，这只有 IE 才认得，
// 这也会使你的 HTML 文档显得不太正规。它实际上通过 javascript 的判断来实现最小宽度。
#container {
  min-width: 600px;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

● 清除浮动

.hackbox {
  display: table; // 将对象作为块元素级的表格显示
}
或者
.hackbox {
  clear: both;
}

或者加入 :after(伪对象)，设置在对象后发生的内容，通常和 content 配合使用，IE 不支持此伪对象，非 IE 浏览器支持，所以并不影响到 IE/WIN 浏览器。这种的最麻烦的。

#box:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#box:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

● DIV 浮动 IE 文本产生 3 像素的 bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的间距。

#box{ float: left; width: 800px; }
#left { float: left; width: 50%; }
#right { width:50%; }
*html #left { margin-right: -3px; } // 这句是关键

<div id="box">
  <div id="left"></div>
  <div id="right"></div>
</div>

#box{ float: left; width: 800px; }
#left { float: left; width: 50%; }
#right { width:50%; }
*html #left { margin-right: -3px; } // 这句是关键

<div id="box">
  <div id="left"></div>
  <div id="right"></div>
</div>

        ● IE 捉迷藏的问题
        当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对 #layout 使用 line-height 属性或者给 #layout 使用固定高和宽。页面结构尽量简单。

        ● 高度不适应
        高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或 paddign 时。

#box { background-color: #eee; }
#box p { margin-top: 20px; margin-bottom: 20px; text-align: center; }

<div id="box">
  <p>p对象中的内容</p>
</div>

#box { background-color: #eee; }
#box p { margin-top: 20px; margin-bottom: 20px; text-align: center; }

<div id="box">
  <p>p对象中的内容</p>
</div>

解决方法：在 p 对象上下各加 2 个空的 div 对象。CSS 代码：.1 { height: 0px; overflow: hidden; } 或者为 DIV 加上 border 属性。

分享到：

CSS 中选择器的详解 | 正则表达式

2010-11-30 08:54
浏览 1547
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论