`

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

    博客分类:
  • ajax
阅读更多

原文出处: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 属性。

分享到:
评论

相关推荐

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...

    CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

    标题和描述均指向了一个核心议题——CSS在不同浏览器(尤其是IE6.0、IE7.0与Firefox)之间的兼容性问题。这个问题对于Web开发者来说至关重要,因为不同的浏览器可能对CSS的解析和渲染方式存在差异,导致网页在不同...

    最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)

    ### 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 Firefox) 在Web开发过程中,确保网站能够在不同的浏览器上正确显示是非常重要的一步。尤其在早期的Web开发时代,面对像IE6、IE7这样的浏览器,以及当时主流的...

    弹窗式日期控件兼容IE 6.0、7.0和 FF 2.0浏览器

    在早期的浏览器如IE 6.0和7.0以及Firefox 2.0中,由于JavaScript和CSS的实现存在差异,使得跨浏览器的兼容性成为开发者的一大挑战。这些老版本浏览器可能不支持某些现代浏览器中的特性,例如CSS3、HTML5的新元素或...

    万年历-支持IE6.0版本以上、Firefox

    这在当时是一个重要的考虑因素,因为IE6.0尽管存在很多已知问题,但在某些企业环境中仍被广泛使用,而Firefox则是一个备受欢迎的替代选择。 从标签“支持IE6.0版本以上、Firefox”可以推断出,开发者可能使用了特定...

    css hack 兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0 浏览器兼容教程

    IE7.0简体中文正式版发布了,对于我等常和网页打交道的人来说... 兼容浏览器版本:IE5.0,IE5.5,IE6.0,IE7.0,Firefox1.5,FireFox2.0  CSS代码:(请注重Hack代码的顺序) 复制代码代码如下: #test{ width:300px

    IE6.0浏览器绿色版

    2. **兼容性问题**:很多现代网页和应用可能不再支持IE6.0,可能会导致显示异常或功能缺失。 3. **更新需求**:由于不进行自动更新,用户需自行关注并手动安装任何安全补丁。 综上所述,IE6.0浏览器绿色版为用户...

    IE4.0 IE5.0 IE5.5 IE6.0集合

    描述中的"微软IE浏览器4.0 5.0 5.5 6.0珍藏集合下载"表明这是一个收藏版,包含了多个重要版本的IE浏览器,对于那些对历史版本有兴趣或者需要进行系统兼容性测试的用户来说非常有价值。"适合于Win95,NT4,Win98,...

    IE6.0sp1-KB823353-x86-CHS.rar_IE6.0S_IE6.0升级包_IE6.X_ie6 X86_ie6.

    标题中的"IE6.0sp1-KB823353-x86-CHS.rar"是指微软的Internet Explorer 6.0 Service Pack 1的更新补丁KB823353的中文版,适用于32位(x86)系统。此补丁是微软针对IE6发布的一个安全更新,主要目的是修复已知的安全...

    适用于车载导航ce v6.0 v7.0系统修改凯立德导航配置文件

    适用于车载导航ce v6.0 v7.0系统修改凯立德导航配置文件

    凯立德V6.0和7.0最新配置修改工具.zip

    凯立德是一款在中国广受欢迎的车载导航系统,其在Windows CE 6.0和7.0平台上也有相应的版本。这个压缩包"凯立德V6.0和7.0最新配置修改工具.zip"包含了帮助用户自定义和优化凯立德导航系统设置的工具。以下是对这些...

    tomcat 6.0 和 7.0

    Tomcat 6.0 和 7.0 是两个不同版本的Tomcat,它们在功能、性能和兼容性上都有所区别。本文将深入探讨这两个版本之间的差异,以及如何从6.0升级到7.0。 【主要知识点】: 1. **版本概述**: - **Tomcat 6.0**:...

    IE6.0安装程序

    1. **浏览器兼容性**:在某些老系统如Windows XP中,IE6.0是默认的浏览器,新版本的网页可能无法在IE6.0上正常运行,因此需要重新安装以满足兼容性需求。 2. **安全性**:尽管IE6.0对于许多用户来说可能具有怀旧...

    IE6.0浏览器

    由于上述问题,开发社区开始推动用户升级到更安全、更现代的浏览器,例如IE7、IE8、Chrome、Firefox等。微软在后续版本中逐步改进了安全性和兼容性,最终在2014年4月8日结束了对Windows XP和IE6的技术支持,这意味着...

    CSS技巧汇总---div+CSS浏览器兼容问题整理

    CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf

    调用浏览器程序(VB6.0源代码)

    例如,如果你想要使用特定的浏览器而不是默认的,如Chrome或Firefox,你需要指定对应的浏览器路径。例如,对于Chrome,路径可能是`"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"`。同时,为了传递...

    Tomcat6.0和7.0

    【标题】:“Tomcat6.0和7.0”涵盖了两个重要的Apache Tomcat版本,分别是6.0和7.0。这两个版本都是流行的开源Java Servlet容器,用于部署和运行Java Web应用程序。Apache Tomcat是Java EE(现在称为Jakarta EE)的...

    UDEC 7.0 与 6.0 FISH语言新旧对比大全

    UDEC 7.0与 6.0 FISH语言新旧对比,对于熟悉UDEC 6.0 又想要使用UDEC 7.0 的人来说,可以使用最新的FISH语言进行建模

    KLD_CfgDiy V6.0_V7.0 配置文件修改器.rar

    在实际应用中,KLD_CfgDiy V6.0_V7.0 配置文件修改器可以广泛应用于系统优化、性能调试以及软件定制。例如,网络管理员可以使用它来优化网络服务的配置,提升服务器的响应速度;开发人员可以借助它调试软件,更改...

Global site tag (gtag.js) - Google Analytics