文档章节

CSS兼容及处理

哈狮子
 哈狮子
发布于 2014/10/08 14:34
字数 648
阅读 9
收藏 0

IE的if条件Hack
1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉
2. 〈!--[if IE]〉 所有的IE可识别 〈![endif]--〉
3. 〈!--[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]--〉
4. 〈!--[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]--〉
5. 〈!--[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]--〉
6. 〈!--[if IE 6]〉 仅IE6可识别 〈![endif]--〉
7. 〈!--[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]--〉
8. 〈!--[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]--〉
9. 〈!--[if IE 7]〉 仅IE7可识别 〈![endif]--〉
10. 〈!--[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]--〉
11. 〈!--[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]--〉
注:
gt = Great Then 大于
> = > 大于号

lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于


以前对 IE9 以下兼容方法是直接在 HTML 的 head 头里面放个 IE 的兼容模式代码

<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7,IE=EmulateIE9" />

这样做就只需要兼容IE6,IE7。但是无法通过 W3C 验证的,还有些其他的缺陷,总觉得不太好,所以放弃了。
注意若要用此设置是不能通过 IE 特有的 HTML 浏览器判断语法的来控制的,如:

<!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->

这样写是没有用处的,而且必须是放在 head 的头部否则也不会识别


CSS兼容方法

  • 仅 IE6 和 IE7 识别,使用 * 星号

  • 仅 IE6 识别,使用 _ 下划线区别

  • 仅 IE7 识别,使用 + 加号

  • 仅 IE8 和 IE9 识别,使用 \0 符号

  • 仅 IE9 识别,使用 \9\0 ,同上, 多次测试后发现无效,后面有补充

  • 仅 IE6 不能识别: !important , 

  • 全部 IE 均可识别 \9 ,

使用顺序

#test {
         color : green !important ;
         color : #EEE ;
         color : #0F0 \ 9 ;
         color : #09F \ 0 ;
         color : #F00 \ 9 \ 0 ;
         * color : #000000 ;
         + color : #630 ;
         _ color : #FF0 ;
}


针对IE9兼容之前的写法有问题

:root #test { color : #F00 \ 0 ;}

这次测试发现貌似只有这样写才能真正的只让 IE9 识别

以上CSS将在 ie6 中显示 #FF0 颜色, IE6以上版本和 chrome、firefox 中显示 green,

  1. 去除 !important 后 

  2. IE6, 显示 #FF0 

  3. IE7, 显示 #630

  4. IE8, 显示 #09F

  5. IE9, 显示 #F00

  6. chrome、firefox 中显示 #EEE ,

以上的各种特殊符号对浏览器兼容基本上就够了,唯一缺憾是无法区别 chrome 和 firefox,不过还好他们两个的样式基本上差不多的,对于一些特殊的 css 属性可以添加各浏览器私有的属性前缀进行区别,但仅限部分样式有效

  • -webkit- Chrome ...

  • -moz- Firefox 

  • -ms- Microsoft

  • -o- Opera


© 著作权归作者所有

哈狮子
粉丝 2
博文 18
码字总数 4651
作品 0
常州
私信 提问
tzhsweet/superui

superui superui官方网站:http://www.supermgr.cn github地址:https://github.com/tzhsweet/superui superui官方一群:559696533 superui是什么? superui是tzhsweet、lkl、hwj三人联合开发的......

tzhsweet
2016/12/27
0
0
CSS Hack 浏览器兼容写法 用法

CSS Hack 不得不在一些项目中运用到。jquery博客也遇上了,关于二次开发的一个3D地图,其实也想好好写代码兼容,苦于上头要东西,短期不可能实现,没法子,回归css hack 吧。 为了调试尼玛的...

天外飘雪
2012/05/10
84
0
CSS Hack 浏览器兼容写法 用法

CSS Hack 不得不在一些项目中运用到。jquery博客也遇上了,关于二次开发的一个3D地图,其实也想好好写代码兼容,苦于上头要东西,短期不可能实现,没法子,回归css hack 吧。 为了调试尼玛的...

天外飘雪
2012/09/13
102
0
兼容iphone x刘海的正确姿势

转自IMWeb社区,作者:zzbozheng,原文链接 9月13日凌晨终于等来了万众瞩目的苹果新品发布会,相信很多小伙伴们都期待新 iphone 可以剪掉刘海胡子,但万万没想到的是等来了三款不同的尺寸的 ...

IMWeb团队
2018/11/13
0
0
CSS 后处理工具--CSS Grace

CSS Grace 是一个由 PostCSS 驱动,面向未来的 CSS 后处理工具。实现了大部分常用的 IEHack,获取图片宽高等,position: center 等功能。同时可以配合 Sass/Less 等预处理工具使用,最重要的...

匿名
2016/06/07
719
0

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部