`
rmzdb
  • 浏览: 81020 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

【转】CSS兼容性问题 CSS hack:区分IE6,IE7,IE8,Firefox

 
阅读更多

总体的来说就是:*_*+识别,IE专用的条件注释,对象的实际宽度不同,消除ul、ol等列表的缩进,透明,圆角,Select控件永远处于最上 层,居中问题text-align、margin: auto,浮动后IE6解释外边距为实际边距的双倍加上display:inline,字体大小,空格大小。

---------------

1.CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义

!important 可被FireFox和IE7识别
* 可被IE6、IE7识别
_ 可被IE6识别
*+ 可被IE7识别

2.IE专用的条件注释

Html代码 复制代码 收藏代码
  1. <!--其他浏览器 -->
  2. <linkrel="stylesheet"type="text/css"href="css.css"/>
  3. <!--[if IE 7]>
  4. <!-- 适合于IE7 -->
  5. <linkrel="stylesheet"type="text/css"href="ie7.css"/>
  6. <![endif]-->
  7. <!--[if lte IE 6]>
  8. <!-- 适合于IE6及一下 -->
  9. <linkrel="stylesheet"type="text/css"href="ie.css"/>
  10. <![endif]-->
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

 

3. 几个浏览器对实际像素的解释

IE/Opera:对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla:对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
4.鼠标手势问题:FireFox的cursor属性不支持hand,但是支持pointer,IE两个都支持;所以为了兼容都用pointer
5.FireFox中设置HTML标签的Style属性时,所有位置、宽高和尺寸值必须后跟px,IE也支持此写法,因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;

6.FireFox无法解析简写的padding属性设置

如padding 5px 4px 3px 1px;必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0;
7.消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效,padding属性对FireFox有效

8.CSS控制透明:

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox:opacity:0.6;

9.CSS控制圆角:

IE:不支持圆角;

Html代码 复制代码 收藏代码
  1. FireFox: -moz-border-radius:4px;或
  2. -moz-border-radius-topleft:4px;
  3. -moz-border-radius-topright:4px;
  4. -moz-border-radius-bottomleft:4px;
  5. -moz-border-radius- bottomright:4px;
FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;

 

10.CSS双线凹凸边框:

Html代码 复制代码 收藏代码
  1. IE:
  2. border:2px outset;
  3. FireFox:
  4. -moz-border-top-colors: #d4d0c8 white;
  5. -moz-border-left-colors: #d4d0c8 white;
  6. -moz-border-right-colors:#404040 #808080;
  7. -moz-border-bottom-colors:#404040 #808080;
IE:
border:2px outset;
FireFox:
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;


11.IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格;FireFox对以上两者均不支持
12.IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用
13.IE支持Form中的Label标签,包括图片和文字内容;FireFox不支持包含图片的Label,点击图片不能让标记 label for 的Radio或CheckBox产生效果
14.FireFox中的TextArea不支持onScroll事件
15.FireFox不支持display的inline和block
16.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行
17.FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中

18.对超链接的CSS样式设置最好遵从这样的顺序:L-V-H-A。

Html代码 复制代码 收藏代码
  1. <styletype="text/css">
  2. <!--
  3. a:link {}
  4. a:visited {}
  5. a:hover {}
  6. a:active {}
  7. -->
  8. </style>
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>


这样可以避免一些访问过后的超链接就不具备hover和active样式了
19.IE中设置长段落自动换行在CSS中设置word-wrap:break-word。

20.在子容器加了浮动属性后,该容器将不能自动撑开

解决方法:在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;

22.IE6下图片下方会有空隙

解决办法:为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

23.IE6下两个层中间有空隙

解决办法:设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;

24.LI中内容超过长度后以省略号的显示方法

Html代码 复制代码 收藏代码
  1. <styletype="text/css">
  2. <!--
  3. li {
  4. width:200px;
  5. white-space:nowrap;
  6. text-overflow:ellipsis;
  7. -o-text-overflow:ellipsis;
  8. overflow: hidden;
  9. }
  10. -->
  11. </style>
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>

 

25.将元素的高度和行高设为相同值,即可垂直居中文本

Html代码 复制代码 收藏代码
  1. <styletype="text/css">
  2. <!--
  3. div {
  4. height:30px;
  5. line-height:30px;
  6. }
  7. -->
  8. </style>
<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>

 

26.对齐文本与文本输入框,须在CSS中增加vertical-align:middle;属性设置

Html代码 复制代码 收藏代码
  1. <styletype="text/css">
  2. <!--
  3. … …
  4. vertical-align:middle;
  5. }
  6. -->
  7. </style>
<style type="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>


27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开,但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height,为了兼容不支持min-height的IE6可以这样定义:

Html代码 复制代码 收藏代码
  1. {
  2. height:auto!important;
  3. height:200px;
  4. min-height:200px;
  5. }
{
height:auto!important;
height:200px;
min-height:200px;
}

 

28.web标准中IE无法设置滚动条颜色

解决办法:在CSS中对body的设置改为对html的

Html代码 复制代码 收藏代码
  1. <styletype="text/css">
  2. <!--
  3. html {
  4. scrollbar-face-color:#f6f6f6;
  5. scrollbar-highlight-color:#fff;
  6. scrollbar-shadow-color:#eeeeee;
  7. scrollbar-3dlight-color:#eeeeee;
  8. scrollbar-arrow-color:#000;
  9. scrollbar-track-color:#fff;
  10. scrollbar-darkshadow-color:#fff;
  11. }
  12. -->
  13. </style>
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

 

29.IE6由于默认行高问题无法定义1px左右高度的容器

解决办法:在CSS中对容器设置如:overflow:hidden | zoom:0.08 | line-height:1px

30.给Flash设置透明属性可使层显示在Flash之上

Html代码 复制代码 收藏代码
  1. <paramname="wmode"value="transparent"/> <!-- 解决IE上的问题 //>
  2. <embedwmode="transparent" …… > <!-- 解决FireFox上的问题 //>
<param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //>
<embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //>


31.FireFox设置Padding属性后会相应的增加Width和Height属性值,IE不会
解决办法:用!important方法多定义一套Height和Width
32.FireFox对div与div之间的空格是忽略的,但IE是处理的;因此尽量在两个相连的div之间不要有空格和回车,否则可能会造成不同浏览器之间格式不正确,比如著名的3px偏差;而且原因很难查明
33.形如如下格式

Html代码 复制代码 收藏代码
  1. <divid="parent">
  2. <divid="content"></div>
  3. </div>
<div id="parent">
<div id="content"> </div>
</div>


当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展;解决办法在层的最下方产生一个高度为1的空格,代码如下

Html代码 复制代码 收藏代码
  1. <divid="parent">
  2. <divid="content"></div>
  3. <divstyle="font: 0px/0px sans-serif;clear: both;display: block"></div>
  4. </div>
<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>


34.IE和FireFox对字体small的尺寸解释不同,FireFox为13px,IE中为16px
35.IE和FireFox对空格的尺寸解释不同,FireFox为4px,IE中为8px

36.在netvibes的CSS看到一个片断

Html代码 复制代码 收藏代码
  1. .transparent{
  2. filter:alpha(opacity=12);
  3. -moz-opacity:0.12;
  4. opacity:0.12;
  5. background-color:#000;
  6. }
  7. filter:alpha(opacity=12); 支持IE
  8. -moz-opacity:0.12; 支持FF
  9. opacity:0.12; css 3标准
.transparent{
filter:alpha(opacity=12);
-moz-opacity:0.12;
opacity:0.12;
background-color:#000;
}
filter:alpha(opacity=12); 支持IE
-moz-opacity:0.12; 支持FF
opacity:0.12; css 3标准

 

37 页面的最小宽度

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

Html代码 复制代码 收藏代码
  1. #container{
  2. min-width: 600px;
  3. width:e xpression(document.body.clientWidth <600? “600px”: “auto” );
  4. }
#container{
min-width: 600px;
width:e xpression(document.body.clientWidth < 600? “600px”: “auto” );
}


第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

38清除浮动

.兼容box{
display:table;
//将对象作为块元素级的表格显示
}
或者
.兼容box{
clear:both;
}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的

Html代码 复制代码 收藏代码
  1. #box:after{
  2. content: “.”;
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }
#box:after{
content: “.”;
display: block;

height: 0;
clear: both;
visibility: hidden;
}

 

39 DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

Html代码 复制代码 收藏代码
  1. #box{
  2. float:left;
  3. width:800px;}
  4. #left{
  5. float:left;
  6. width:50%;}
  7. #right{
  8. width:50%;
  9. }
  10. *html #left{
  11. margin-right:-3px;
  12. //这句是关键
  13. }
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}


HTML代码

Html代码 复制代码 收藏代码
  1. <DIVid=box>
  2. <DIVid=left></DIV>
  3. <DIVid=right></DIV>
  4. </DIV>
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

 

40 高度不适应

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

Html代码 复制代码 收藏代码
  1. <divid=”box”>
  2. <p>p对象中的内容</p>
  3. </div>
  4. CSS:
  5. #box {background-color:#eee; }
  6. #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id=”box”>
<p>p对象中的内容</p>
</div>
CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }


解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。
IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ &gt;body select {……}
这句与上一句的作用相同。
仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。
仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法
selct {width:IE5.x宽度; voice-family :”"}”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题 。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

常用的应该就这么多,以后碰到在更新。

声明: 本文由( 3eyes )原创编译,转载请保留链接: CSS兼容性问题 CSS hack:区分IE6,IE7,IE8,Firefox

分享到:
评论

相关推荐

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

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

    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解决IE6,IE7,firefox兼容性问题.

    ### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展,浏览器种类日益增多,其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期,IE6、IE7 和 ...

    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或者特性,...

    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,即...

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

    总之,"IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 是一个宝贵的工具,帮助开发者处理跨浏览器的CSS兼容性问题。尽管随着技术的发展,直接使用hack的情况越来越少,但理解这些技巧仍然是解决历史遗留...

    CSS兼容IE6,,IE7,I8 FIREFOX

    本文将详细解析如何通过CSS技巧来解决跨浏览器兼容性问题,特别是针对IE6、IE7、8以及Firefox等浏览器的兼容性处理方法。 #### 二、CSS Hack概述 **CSS Hack**是一种特定的技术手段,用于编写能够被某些特定浏览器...

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

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

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

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

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

    在网页开发中,兼容性问题是一个常见且棘手的问题,尤其是涉及到老版本的Internet Explorer(IE6、IE7、IE8)和Firefox等其他浏览器。这些浏览器对于CSS(层叠样式表)的解析方式存在差异,导致在不同浏览器中页面...

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

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

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

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

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

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

    div+css常见兼容性问题

    这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异,尤其是老版本的Internet Explorer(如IE6和IE7)与其他浏览器(如Firefox、Chrome等)之间。 首先,我们来探讨一下通用的解决方案。`height`属性在...

    css区别IE和非IE浏览器

    通过合理运用上述提到的各种CSS Hack技术和兼容性解决方案,可以有效地解决不同版本IE浏览器以及其他非IE浏览器之间的兼容性问题,从而确保网站在各种环境下都能够呈现出一致且良好的用户体验。

    兼容cssie6 7 8

    本篇文章将详细介绍如何通过CSS Hack来实现对IE6、IE7、IE8以及Firefox的兼容。 首先,我们需要理解不同浏览器之间的差异。Firefox通常对CSS标准支持较好,而IE6、IE7、IE8则存在各种解析上的问题,如盒模型、浮动...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    本文将深入探讨如何使CSS样式兼容IE6、IE7、IE8、IE9以及Firefox、Chrome等现代浏览器。 1. **DOCTYPE声明的影响**: DOCTYPE声明对于浏览器的渲染模式至关重要。在HTML文档的顶部加入正确的DOCTYPE,如`&lt;!DOCTYPE...

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

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

Global site tag (gtag.js) - Google Analytics