Chinaunix首页 | 论坛 | 博客
  • 博客访问: 69753
  • 博文数量: 34
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 287
  • 用 户 组: 普通用户
  • 注册时间: 2013-11-26 15:01
文章分类
文章存档

2013年(34)

我的朋友

分类: Html/Css

2013-12-04 15:31:56

 在推推99开发初期由于房产网站涉及多方面因素,包括出租出售地图找房周边经纪人等浏览器兼容性问题是网站前端设计师最为苦恼的问题,网络上也有很多相关的资料,但是很多不符合WEB2.0标准。现在主流的解决方法主要是IE条件注释和CSS HACK*(建议尽量少用,容易用上瘾)。

前言,对于开发人员来说最大的问题是绝大多数用户仍然在使用IE6,而它是一个对CSS规范支持较差,问题较多的浏览器。

1.1条件注释
前言,是一种安全的区分IE浏览器版本的语法,且被认为是取代对IE CSS hack 的首选方法。
 1.条件注释:就是一些if判断,但这些判断不是在脚本里面执行的,而是直接在HTML代码里执行。
 例如:

说明:条件注释的基本结构和HTML的注释( )是一样的。因此IE以外的浏览器将会把他们看做是普通的注释而完全忽略它们。
 IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
 条件注释使用的是HTML的注释结构,因此它们只能用在HTML文件里,而不CSS文件中使用。

例1. 判断是否是IE

例2.判断是否是IE6

例.3 判断是否是IE7


例4.判断条件lte 小于等于、lt小于、gte大于等于、gt大于、!
 大于等于IE6版本

 除了IE浏览器(测试不生效)
解决方法:

内容


1.1条件注释-实用
说明:由于IE各个版本的浏览器对制作的Web标准页面解释不一样,具体就是对CSS解释不同,因此为了使不同版本的浏览器都能够兼容,可运用条件注释来个字定义,达到兼容的目的。
例.






1.1条件注释-测试使用

例.在IE浏览器下执行显示为红色,而在非IE浏览器显示为黑色。

2. css hack

前言, CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7, 6,Internet Explorer 8,Mozilla Firefox等,对CSS的解析不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

2.1 css hack详解

注:所有的hack都是针对IE浏览器
"\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.
"\0" IE8识别,IE6、IE7不能.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.

2.2 css hack 举例1
IE6 hack
_background-color:#CDCDCD;

IE6 IE7 hack
*background-color:#dddd00;

IE8 hack
background-color:red\0;

IE9 hack
background-color:blue\9\0;


2.3 css hack 举例2

例.
#tip{
 background:blue;
 background:green\9; 区分IE 和firefox(不支持)
 *background:red !important;
 *background:yellow;
 说明:IE6能识别*;不能识别 !important;
 IE7能识别*,能识别!important;
 FF不能识别*,但能识别!important;
2.4 CSS HACK总结

_IE6专用 (IE6不支持!important)
*IE6和IE7专用
\0 IE8IE9
\9区分IE和火狐
!important IE6以上的浏览器支持

\9\0 IE9支持


阅读(820) | 评论(0) | 转发(0) |
0

上一篇:PHP必知必会

下一篇:IE支持png背景透明

给主人留下些什么吧!~~