针对ie6的一些csshack编写时的注意点小结

爱尚丽明      2022-02-08     224

关键词:

 
 
 

区分出IE6的hack写法
1.区别IE6、7与FF/IE8:

JavaScript Code复制内容到剪贴板
  1. background:blue;*background:orange;   

引用
显示效果:
IE 6/7:orange
FF/IE8:blue
原理:FF/IE8不支持*开头,而IE6/7都支持。

2.区别IE6与IE7/IE8/FF:

CSS Code复制内容到剪贴板
  1. background:green;_background:blue;   

引用
显示效果:
IE7/8/FF:green
IE6:blue
原理:IE6支持下划线"_",IE7、8和firefox均不支持下划线。


3.区别FF/IE8和IE6/7:

CSS Code复制内容到剪贴板
  1. background:orange;+background:green;-background:blue;  

或者

CSS Code复制内容到剪贴板
  1. background:orange;*background:green!important;*background:blue;  

引用
显示效果:
IE6:blue
IE7:green
FF/IE8:orange
原理:IE6能识别-,IE7能识别+,IE8和FF都不能识别+和-
IE8/FF都不识别*,IE7优先识别!important,IE6不能识别!important。


4.可同时区分IE8、IE7、IE6、Firefox的CSS hacks:

CSS Code复制内容到剪贴板
  1. .test{   
  2.     color:#000; /* Firefox */  
  3.     color:/***/#00f9; /* IE8 */  
  4.     *color:#f00; /* IE7 */  
  5.     _color:#0f0; /* IE6 */  
  6. }  

IE6兼容的一些额外需要考虑的细节:
1.position:fixed

对这个属性印象深刻,每一次需要用到固定的时候,IE6总是蹦出来告诉你,我不支持position:fixed,你要对我特殊点,要么使用CSS表达式,要是时刻计算滚动的高度,再加上position:absolute.

2.浮动双倍边距

当在浮动中使用margin时,你要时刻记得加上display:inline,不然IE6不给你好脸色,总是会让你布局错乱,就因为它会是双倍的边距。

3.背景透明

之前总是用png8来兼容IE6,实在没办法时,你还要ps上下功夫,图省事的话,你要加一个DD_belatedPNG.JS,各种技能层出不穷,但是都有一个就是耗时不讨好。

4.max-height/min-height

想要给它一个最大尺寸或者最小尺寸时,IE6却告诉你,我只能用确定尺寸,你需要的话,用表达式吧

5.IE6 点击链接出现虚线

呵呵,产品说不去掉影响用户体验,我只想说:用了IE6还谈啥体验。

6.弹窗出现在select上要加个iframe

因为select在IE6中是一个控件,层级比其他层高,所以如果弹窗要兼容IE6,背景记得加多一层iframe

7.尺寸超出会自动延伸

假如你给某个层加了一个高度,当内容超出时,没有overflow:hidden;时,IE6默认会撑开,有时候会出现莫名布局错乱。

8.不能使用.class.class2

使用以上的css写法在ie6中不识别,这导致了,很多时候你不得不改变重构的策略,改用.class-class1的写法。

9.盒子模型解析不一致

在Quirks Mode中,盒子的宽度计算与Standards Mode的不同

在 IE 盒模型中,
box width = content width + padding left + padding right + border left + border right,
box height = content height + padding top + padding bottom + border top + border bottom,
而在 W3C 标准的盒模型中,box 的大小就是 content 的大小。


























csshack

前面的话  CSSHack是实现浏览器样式兼容的兜底办法,能不用就尽量不要使用。但是,针对一些浏览器的bug,比如老版本IE的bug,有时使用CSSHack是不得已而为之的做法。本文将详细介绍CSSHack。CSSHack主要分为属性标记法和选择器... 查看详情

csshacker使用小结(兼容ie678)

什么是CSShack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需... 查看详情

关于csshack

关于CSSHACK可以参见这个网站http://browserhacks.com/。网上很多资料中常常把!important也作为一个hack手段,其实这是一个误区。!important常常被我们用来更改样式,而不是兼容hack。造成这个误区的原因是IE6在某些情况下不主动识别!import... 查看详情

csshack

转自CSDNfreshlover的博客专栏《史上最全CSSHack方式一览》什么是CSShack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面... 查看详情

csshack技术

首先我们要了解一个概念CSShack不同浏览器,比如IE6、IE7、IE8,MozillaFirefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样。这个时候我们就需要针对不同的浏览器去定义不同的CSS,让它能够同时兼... 查看详情

常用的csshack

一、什么是CSSHack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过程,就叫CSSHack。CSSHack常见的... 查看详情

csshack

什么是css hack  由于不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11,Firefox,Safari,Opera,Chrome等),对Css的支持,解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,为了获得统一的页面效果,... 查看详情

css常见的中属性级,选择符级的hack

注意:尽量找到通用方法而减少对CSSHack的使用,大规模使用CSSHack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题。  星号*针对IE6,7;下划线_针对ie6  例如:_background:red;属性级:  9  适用性IE6... 查看详情

史上最全的csshack方式一览

转自:什么是CSShack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果... 查看详情

csshack的一些知识

测试环境:Windows7主要测试:IE6、IE7、IE8、FireFox3.5.6次要测试:Chrome4.0、Opera10.10、Safari4.04、360浏览器3.1为了能够让多个Hack在同一个例子里,现对实例页面做如下要求是:1、左右有两个DIV分别是#menu,#content,字体颜色为白色。2、... 查看详情

hack(浏览器兼容csshack)

...我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSSHack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(ifIE)Hack,CSSHack主要针对类内部hack:比如IE6能识别下划线"_"和星号"*",IE7能识别星号"*",但不能识别下... 查看详情

csshack(ie6-ie9+)

IE6csshack:1.*htmlSelector{}/*Selector表示css选择器下同*/2.Selector{_property:value;}/*property:value表示css的属性名:属性值下同*/3.Selector{_property/**/:/**/value;}4.Selector{-property:value;}/*IE6csshack常用习惯推荐使用下划线_* 查看详情

关于csshack

    由于不同厂商的浏览器,比如InternetExplorer,Safari,MozillaFirefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,导致生成的不是我们所需要的页面效果。这个时候我们就需要... 查看详情

csshack技术介绍及常用的hack技巧(代码片段)

一、什么是CSSHack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过程,就叫CSSHack。CSSHack常见的... 查看详情

csshack

CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},... 查看详情

csshack

!important作用:用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码:#content{    height:960px !important;    height:900px;}      查看详情

csshack

[*+><]兼容IE6/7_兼容IE69兼容IE6/7/8 查看详情

针对ie的csshack

/* IE9 , IE10 ,IE11 */@media screen and (min-width:0 查看详情