主要讲下hack的兼容用法,比较浅,哈哈
hack是主要来处理IE的兼容,不同的IE,不同的兼容方式
/* | |
属性前缀法(即类内部Hack): | |
*color:#000; *号对IE6,IE7都生效 | |
+color:#555; +号对IE6--IE10都生效 | |
-color:#999; -号只对IE6生效 | |
_color:#888; _下划线只对IE6生效 | |
color:red\9;\9对 IE6/IE7/IE8/IE9/IE10都生效 | |
color:blue\0; \0对IE8/IE9/IE10都生效,是IE8/9/10的hack | |
color:green\9\0; \9\0 只对IE9/IE10生效,是IE9/10的hack | |
#color:pink; #号对IE6/IE7/IE8/IE9/IE10都生效 | |
*/ |
看看怎么用的,来吧
width: 300px\9; | |
*width: 800px; | |
_width: 300px; | |
height: 120px; | |
height: 60px\9; | |
*height: 80px; | |
_height: 100px; | |
color: #FF6900; | |
color: red\9; | |
*color: deepskyblue; | |
_color: #000; | |
/*color:blue;*/ | |
background: #aaa; | |
background: #ddd\9; | |
*background: red; | |
_background: #aaa; | |
box-shadow: 0 0 5px #555; | |
box-shadow: 0 0 5px #555\9; | |
*box-shadow: 0 0 5px #555; | |
_box-shadow: 0 0 5px #555; | |
/*border: 1px solid #FF6900;*/ | |
/*border: 4px solid red\9;*/ | |
/**border: 8px solid deepskyblue;*/ | |
/*_border: 12px solid #000;*/ | |
text-align: center; | |
line-height: 100px; |
他也支持选择器的hack:
CSS选择器的Hack | |
*html: 在选择器前面加 *html 表示该样式在IE6以及IE6以下版本浏览器生效 | |
:root: 在选择器前面加 :root 表示该样式在IE9及以上版本浏览器生效,对firefox和chrome也生效 | |
*+html: 在选择器前面加 *+html 表示该样式仅仅在IE7版本浏览器生效 | |
html>body: 在选择器前面加 html>body 表示该样式除IE6之外的所有浏览器都生效 |
例子:
*/ | |
*html .a { | |
color:#fff; | |
} | |
:root .a { | |
/*color: blue;*/ | |
} | |
*+html .a{ | |
/*color:#ff6900;*/ | |
} | |
html>body .a { | |
color: green; | |
} |
Hack还支持html文本格式的兼容,意思是他可以找到你所匹配的IE版本,然而他并不是注释,第一次用它的话,哈哈哈,有可能你会觉得他是个注释,
同时也支持大于某一个版本,或者小于It某一个ie版本
<!--IE条件注释法(即HTML条件注释Hack)--> | |
<!--[if IE]> | |
<p>所有IE浏览器显示</p> | |
<![endif]--> | |
<!--[if IE 7]> | |
<p>IE7浏览器显示,数字可以改 ,比如改成8,就是IE8浏览器显示</p> | |
<![endif]--> | |
<!--[if gte IE 6]> | |
<p>IE6以上(包括)浏览器显示,数字可以改 ,比如改成7,就是IE7以上(包括)浏览器显示</p> | |
<![endif]--> | |
<!--[if ! IE 8]> | |
<p>非IE8浏览器显示,数字可以改 ,比如改成9,就是非IE9浏览器显示</p> | |
<![endif]--> | |
<!--[if !IE]> | |
<p>非IE浏览器显示</p> | |
<![endif]--> |
同理,在head里面,我们也可以写IE的兼容,例子来了
主要讲下hack的兼容用法,比较浅,哈哈的更多相关文章
- CentOS7下Firewall防火墙配置用法详解
官方文档地址: https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/Security_Guide ...
- linux下find查找命令用法
Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- Asp.net服务器控件在IE10下的不兼容问题
Asp.net服务器控件在IE10下的不兼容问题 时间:2013-05-16 09:07点击: 89 次 [大 中 小] 相信很多使用IE10的童鞋们已经发现了这个问题,以下是本人在IE10标准模式下 ...
- IE6-7下margin-bottom不兼容解决方法(非原创,视频中看到的)
在IE低版本下有很多不兼容,现在将看到的 IE6-7下margin-bottom不兼容解决方法 演示一下,方便日后自己查阅. <!DOCTYPE html> <html la ...
- FCKEditor在IE10下的不兼容问题解决方法
环境介绍:FCKEditor 版本 2.x.x 问题:IE10 下FCKEditor不兼容,显示不出来 关键词:不同于其他方法之处是第一个关键点,其他网友的正则表达式不对 解放方法:(可以直接< ...
- Scala中_(下划线)的常见用法
Scala中_(下划线)的常见用法 地址:https://www.jianshu.com/p/0497583ec538
- windows和linux下目录分隔符兼容问题(换行回车兼容)
windows和linux下目录分隔符兼容 DIRECTORY_SEPARATOR 换行回车兼容 PHP_EOF
- Bootstrap历练实例:导航内下拉菜单的用法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- 201521123080《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程: 操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己 ...
- 【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass
写在前面: 众所周知CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),在前期的界面样式设计时,需要书写大量看似没有逻辑的代码,不方便维护及扩展,也不利于重复调用,尤其对于 ...
- hadoop运行wordcount实例,hdfs简单操作
1.查看hadoop版本 [hadoop@ltt1 sbin]$ hadoop version Hadoop -cdh5.12.0 Subversion http://github.com/cloud ...
- MySQL集群(一)之主从复制
前面学完了JDBC,接下来带大家感受一下MySQL集群!其实什么是MySQL集群?简单的说就是一群机器(服务器)的集合,它们连在一起来工作. 其实各种数据库都有自己的集群,常常的多: 我们要学习的就是 ...
- Spring配置属性文件
在项目开发阶段和交付阶段数据库的连接信息往往是不同的,可以把这些信息写成属性文件,再在Spring中导入即可引用 jdbc.properties属性文件如下: jdbc.driverClassName ...
- hibernate中Query的list和iterator区别
1.Test_query_list类 public class Test_query_iterator_list { public static void main(String[] args) { ...
- 关于在jsp页面中使用/struts-tags标签库的迭代器时,从ValueStack获取参数使用EL的问题
情况复原下: 通过valuestack存了个user,然后页面里可以${user.sex}拿到男.${user.sex=='男'}拿到ture 但是在使用 <s:if text="${ ...
- arm-linux-gcc 4.3.2编译uboot 1.1.6
在第三期项目的视频中,官方提供了一整套新的工具链,bootloader, 内核和文件系统(arm-linux-gcc_4.3.2, uboot-2012.04.01, linux-3.4.2)其中ub ...
- 在有main函数的前提下 eclipse找不到主类
有时候在测试类的时候eclipse会莫名奇妙的提示找不到主类 接下来分别有几种解决办法 1.在项目上右击> Builder Path -> Configure Build Path - ...
- LINUX通过PXE自动部署系统
原理介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP 协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂.开销不大的 ...