`
waztxbxzty11
  • 浏览: 6354 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS浏览器兼容性的各种代码解决方案

阅读更多
网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS,最大化兼容浏览器。
一般情况下,我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器,下面是用的较频繁的CSS Hack技巧:
用的最广莫过于!important了, 它可以针对IE(IE 7.0能正确理解!important)和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important,就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异,我都会使用!important。

1、仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
4、html/**/ >body select {…}
这句与上一句的作用相同。
5、仅IE6不识别,屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别,屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
7、仅IE5不识别,屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。
8、盒模型解决方法
selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
9、只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
10、IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css’; /*”;}
}/* */
11、IE5/MAC的过滤器,一般用不着
/*\*//*/
@import “ie5mac.css”;
/**/
--------------------------------------------------------------------
12、IE的if条件Hack  www.xxcss.com提供
<!--[if IE]> Only IE <![endif]--> 所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]--> 只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]--> IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]--> 仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]--> IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]--> 仅IE7可识别
-----------------------------------------------------------------
你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下:
IE都能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important;
IE7能识别*,也能识别 !important;
FF不能识别*,但能识别 !important;
例如style="*width:10px;!important width:20px;"
这样在IE6下宽度为10px,在IE7下宽度时20px
-----------------------------------------------------------------

最新的CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。
.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}
经FF2、OP9.21、OP9.10、Sa3.0.3(pc)、IE7、IE6测试通过,如果你在其他的浏览器版本上测试过
分享到:
评论

相关推荐

    常见浏览器兼容性问题与解决方案

    总结来说,解决浏览器兼容性问题需要对各种浏览器的解析规则有深入理解,通过适当的CSS技巧和Hack方法来确保在不同浏览器下的表现一致性。对于严谨的前端开发者,这不仅是提升用户体验的必要工作,也是提高代码可...

    2016年度最全整理浏览器兼容性问题与解决方案

    本文将针对标题和描述中提到的常见浏览器兼容性问题及其解决方案进行详细阐述。 首先,浏览器的解析差异是导致兼容性问题的主要原因。每个浏览器都有自己的内核,如Internet Explorer的 Trident、Firefox的 Gecko、...

    css浏览器兼容.docx

    CSS浏览器兼容性问题解决方案 CSS浏览器兼容性问题是Web开发中常见的问题。不同的浏览器对CSS的解析方式不同,这就导致了浏览器之间的兼容性问题。了解浏览器的兼容性问题是非常重要的,为此,我们总结了一些常见的...

    最全的CSS浏览器兼容问题

    以下是一些常见的CSS浏览器兼容性问题及其解决方案: 1. **垂直居中问题**: 在CSS中,要实现一个div的垂直居中,可以使用`vertical-align: middle;`和`line-height`属性。但这种方法要求内容不换行。例如: ```...

    CSS 多浏览器兼容性问题及解决方案

    Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3、FF:...

    CSS浏览器兼容问题

    本文将从标题和描述出发,详细探讨在实际开发中常见的CSS浏览器兼容性问题及其解决方案。 #### 二、CSS与浏览器兼容性的基本概念 **1. 什么是浏览器兼容性?** 浏览器兼容性是指网页能够在不同类型的浏览器中正确...

    css 多浏览器兼容解决方案 下载

    CSS 多浏览器兼容性是Web开发中的重要环节,因为不同的浏览器对CSS的解析方式可能存在差异,这可能导致在不同浏览器中页面展示效果不一致。以下是一些关键知识点和解决方案: 1. **DOCTYPE影响CSS处理**: DOCTYPE...

    css浏览器兼容性前端人员的必备

    ### CSS浏览器兼容性——前端开发者的必备技能 #### 一、引言 随着Web技术的发展,前端开发变得越来越重要。为了确保网站能够在不同浏览器中稳定运行,了解并掌握CSS的浏览器兼容性技巧至关重要。本文主要介绍了...

    浏览器兼容代码大全

    #### 兼容性解决方案概览 ##### Meta标签兼容设置 ```html ,chrome=1"&gt; ``` 此行代码用于告诉IE浏览器以最高版本的渲染模式来打开网页,并启用Google Chrome Frame(如果安装的话)。这样可以确保IE浏览器能够更...

    css浏览器兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,不同的浏览器对于CSS的支持程度也有所不同,这导致了在开发过程中经常会遇到浏览器之间的兼容性问题。本文旨在总结和分享一系列关于CSS兼容性的技巧...

    浏览器兼容性问题及解决方案[归类].pdf

    总的来说,浏览器兼容性问题的解决需要开发者对标准有深入理解,同时利用现有的工具和技术,确保代码的可维护性和广泛适用性。通过持续学习和实践,开发者可以有效避免和解决这些问题,使得网页在各种环境下都能表现...

    div+css中常见的浏览器兼容性处理

    【CSS浏览器兼容性处理】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术。然而,不同的浏览器对CSS的理解和解析方式存在差异,这可能导致在某些浏览器下网页显示不正常。特别是在使用div+css...

    CSS浏览器兼容汇总

    以上总结了一些常见的CSS浏览器兼容性问题及其解决方法。通过理解这些问题的根源以及相应的解决方案,可以有效地提高网页在各种浏览器中的兼容性和用户体验。随着现代浏览器技术的发展,许多问题已经得到了缓解,但...

    Css与各浏览器兼容性

    解决浏览器兼容性问题的最佳实践包括遵循W3C标准编写CSS,使用reset.css重置浏览器默认样式,利用CSS预处理器(如Sass或Less)简化代码,以及利用条件注释或特性检测库(如Modernizr)为不同浏览器提供特定样式。...

    CSS浏览器的兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,前端开发变得越来越复杂,特别是CSS的跨浏览器兼容性问题一直是开发者们头疼的问题之一。不同的浏览器对CSS的支持程度不同,导致同样的一段CSS代码在...

    CSS-浏览器兼容实战.pdf

    《CSS-浏览器兼容实战》一书深入探讨了CSS在不同浏览器中的兼容性问题及其解决方案。CSS,即层叠样式表,是用于控制HTML或XML文档样式的计算机语言。在网页设计中,CSS起着至关重要的作用,尤其在实现响应式布局和...

    css浏览器兼容性总结.pdf

    CSS浏览器兼容性是前端开发者经常面临的一个挑战,尤其是在处理IE和Firefox等不同浏览器时。以下是一些关键的CSS兼容性问题及解决方案: 1. **垂直居中问题**: - 在IE和Firefox中,实现`div`的垂直居中可以通过...

    最全整理浏览器兼容性问题与项目解决方案.pdf

    解决方案:CSS里*备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的外补丁是0。 二、浏览器兼容问题二:块属性标签float后,又有横行的margin的情况下...

Global site tag (gtag.js) - Google Analytics