`

IE6、IE7、Firefox兼容CSS Hack总结

    博客分类:
  • CSS
阅读更多

            今天,上午开始调淘宝页面,当然少不了要调兼容,因为以前没调过,所以,今天查了一下浏览器的兼容识别

IE6,IE7,Firefox兼容的css hack
第一种办法:
body
{
background:red;
*background:blue !important;  
*background: green;
}

第一排给Firefox以及其他浏览器看;
第二排给IE7,IE7既能能识别*号,也能识别important;
第三排给IE6也能识别*号;

第二种办法,使用_来区分IE6:
body
{
background:red;
*background:blue;  
_background: green;
}

第一排给Firefox以及其他浏览器看;
第二排给IE7,IE7既能能识别*号;
第三排给IE6能识别下划线;

CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。
常见兼容问题:

  1.DOCTYPE 影响 CSS 处理(但这个声明对于WEB标准的验证是非常重要的)
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

div{margin:30px!important;margin:28px;}
  注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}
  重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
10.IE5 和IE6的BOX解释不一致
IE5下

div{width:300px;margin:0 10px 0 10px;}
  div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
  关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}
  就能解决大部分问题

分享到:
评论

相关推荐

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...

    针对firefox ie6 ie7 ie8的css样式hack

    通过上述介绍可以看出,针对Firefox、IE6、IE7和IE8的CSS Hack是一种有效的解决浏览器兼容性问题的方法。虽然这种方法增加了开发和维护的成本,但对于需要支持多个浏览器版本的项目来说仍然是必要的。在实际应用中,...

    CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar

    这份名为“CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar”的压缩包,提供了针对这些浏览器的CSS Hack解决方案,以确保在不同环境下页面的正常显示。 CSS Hack通常指的是利用浏览器解析CSS的bug或者特性,...

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    "IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源,帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题,了解各种CSS hack及其在这些浏览器中的表现。 ...

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中,例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等,如何使网页正常显示的技术。这个技术的核心是 CSS Hack,即...

    css解决IE6,IE7,firefox兼容性问题.

    本文旨在详细介绍如何通过 CSS hack 技术以及调整 CSS 属性来解决 IE6、IE7 及 Firefox 之间的兼容性问题。 #### 二、CSS Hack 技术 CSS Hack 是一种特殊的 CSS 编写技巧,用于向特定版本的浏览器提供不同的样式...

    IE6、IE7、Firefox之间的兼容写法

    通过本文介绍的各种CSS Hack技巧,可以有效解决IE6、IE7以及Firefox之间的兼容性问题。然而,在实际开发中,我们还应考虑更多的现代浏览器,如Chrome、Safari等,并尽可能采用更标准、更易于维护的方式来编写CSS代码...

    CSS hack 针对IE6,IE7,firefox显示不同效果

    针对IE6、IE7和Firefox显示不同效果的CSS hack是前端开发中常见的需求,特别是在使用CSS+DIV布局时。本文将详细讲解如何使用CSS hack来区分这三种浏览器,并提供一些实用的技巧和方法。 首先,我们需要了解IE6、IE7...

    IE6、IE7、IE8、Firefox、Chrome、Safari的CSS hack兼容一览表

    ### IE6、IE7、IE8、Firefox、Chrome、Safari的CSS Hack兼容一览表 在Web开发过程中,为了确保网站能够在不同的浏览器中保持一致的显示效果,开发者常常需要运用CSS Hack技术来解决浏览器间的兼容性问题。CSS Hack...

    css样式表兼容总结,兼容火狐,ie6,ie7,FF

    标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...

    css hack浏览器兼容性

    css hack ie6 ie7 ie8 firefox等浏览器兼容性

    区分ie6 7 8 FF 的css hack 日常总结

    "区分ie6 7 8 FF 的css hack 日常总结"这个主题集中讨论了如何针对IE6、IE7、IE8以及Firefox等浏览器编写特定的CSS代码来实现跨浏览器的兼容性。 首先,让我们了解CSS Hack的基本概念。CSS Hack是指由于不同浏览器...

    ie6/7/8的 css hack

    【CSS Hack】在Web开发中,CSS Hack是一种特殊的技术,用于解决不同浏览器对CSS解析的差异,特别是针对老版本的Internet Explorer(IE6、IE7和IE8)的兼容性问题。这些浏览器在解析CSS时存在诸多不一致,导致设计师...

    CSS兼容IE6,,IE7,I8 FIREFOX

    ### CSS兼容IE6、IE7、IE8及Firefox解析与应用 #### 一、引言 随着Web技术的发展,浏览器的兼容性问题一直是前端开发者关注的重点。尤其在早期的Web开发过程中,Internet Explorer(IE)系列浏览器由于市场份额较大...

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

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

    简单CSShack:区分IE6、IE7、IE8、Firefox、Opera().pdf

    在《简单CSShack:区分IE6、IE7、IE8、Firefox、Opera》中,作者介绍了两种主要的方法来针对这些浏览器进行CSS样式区分。 方法一主要依赖于特殊的CSS选择器来区分浏览器。以下是对四种特殊符号的测试结果: 1. `>`...

    IE6、_IE7、IE8、Firefox兼容性问题

    总的来说,处理IE6、IE7、IE8和Firefox的兼容性问题需要深入理解CSS的解析机制,以及不同浏览器的特性。通过巧妙地利用CSS Hack、条件注释和JavaScript,开发者可以构建出在多种浏览器环境下表现良好的网页。然而,...

    IE6_0、IE7_0 与FireFox CSS兼容的解决方法(网上收集)

    ### IE6_0、IE7_0 与 FireFox CSS 兼容的解决方法 在Web开发的历史中,处理不同浏览器间的CSS兼容性问题一直是开发者面临的挑战,尤其是针对早期版本的Internet Explorer(如IE6_0和IE7_0)与FireFox之间的差异。...

    div+css 完全兼容 样式兼容性 ie6 ie7 IE8 IE9 和firefox方法

    然而,由于不同浏览器对CSS标准的支持程度不一,尤其是在IE6、IE7、IE8、IE9和Firefox之间存在兼容性问题,开发者需要采取特殊策略来确保页面在这些浏览器上正常显示。本文将深入探讨如何实现`div+css`的完全兼容。 ...

    CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法

    在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时,我们需深入理解不同浏览器对CSS的支持差异,以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析: ### 1. 了解...

Global site tag (gtag.js) - Google Analytics