CSS Hack及常用的技巧
不同的浏览器,比如Internet Explorer 6、Internet Explorer 7、 Mozilla Firefox对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。此时我们需要针对不同的浏览器写不同的CSS,让它能够兼容不同的浏览器,能够在不同的浏览器中得到我们想要的页面效果。针对不同浏览器编写不同CSS code的过程就叫CSS Hack,或叫写CSS Hack。
不同浏览器对CSS解析的差别如下:
- !important能被IE7、FF识别,但不能被IE6识别
- IE6支持"*" or "_"开头的CSS,IE7支持"*"开头的CSS,但不支持"_"开头的CSS,FF两者都不支持
- "+"开头的CSS样式仅能被IE7识别
- "\0"结束的CSS样式仅能被IE8识别
- "\9"的CSS样式能被IE识别
【书写顺序:针对FF的样式放在最前面,针对IE7的样式放在中间,针对IE6的样式放在最后 】
1. !important
!important 指定样式应用规则的优先权,区别IE6与IE7,区别IE6与其它浏览器。
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
IE7和其它标准浏览器能识别!important,显示#60A179颜色,IE6不能识别!important,显示#00F颜色。
2. *
IE都能识别"*",标准浏览器(如FF)不能识别"*"。
区别IE与FF:
.browserTest { border:20px solid #60A179; *border:20px solid #00F;}
区别IE6、IE7、FF:
.browserTest
{
border:20px solid #60A179;
border:20px solid #00F !important;
*border:20px solid #fff;
}
3. _
IE6支持"_",IE7和FF都不支持"_" 。区别IE6、IE7、FF:
.bowserTest { border:20px solid #60A179; *border:20px solid #00F; _border:20px solid #fff;}
4. *+html 与 *html
*+html 与 *html 是IE特有的标签, firefox 暂不支持。而*+html 又为 IE7特有标签
.browserTest { width: 120px; } /* FireFox fixed */
*html .browserTest { width: 80px;} /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
CSS Hack及常用的技巧的更多相关文章
- CSS書寫規範及CSS Hack
基本原则: CSS样式可细分为3类:自定义样式.重新定义HTML样式.链接状态样式. 样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定. 样式名 “.”+“相 ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- CSS Hack技术介绍及常用的Hack技巧
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- CSS hack常用方案(摘选)
邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...
- 常用的CSS Hack
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- 常用的CSS Hack技术集锦
来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...
- CSS hack技巧
CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...
- 常用CSS HACK
常用CSS HACK IE6 3像素bug和双边距bug一样的经典 现象: IE6下浮动元素和不浮动元素之间会有3px间隙(3px bug,div.float-left + div.float-non ...
随机推荐
- 【spring-quartz】 定时调度,时间设置
. CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 1 ...
- fibonacci 斐波那契数列
1.小兔子繁殖问题 (有该问题的详细来由介绍) 2.台阶问题 题目:一个人上台阶可以一次上一个或者两个,问这个人上n层的台阶,一共有多少种走法. 递归的思路设计模型: i(台阶阶数) ...
- RAC 集群更换IP
RAC 集群更换 IP 主要分三步:停集群服务.配置服务器网络.修改集群配置.下面是同网段内更换 IP 示例.(r7.r8为服务器名称,orcl为ORACLE_SID,scanip为 scan 名称) ...
- MySQL redo lock 死锁问题排查 & 解决过程
版权声明:本文由张青林原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/181 来源:腾云阁 https://www.qclo ...
- 【hdu2196】Computer
hdu 2196 computer 题意 给你一棵树,边有权值. 对于每一个点,求其与其距离最远的点的距离. 分析 思路1:树的直径 利用直径的性质进行求解,网上资料很多,这里不赘述. #includ ...
- Android Drawable资源
Android实现应用d动画效果:比如App第一次打开的开始动画等 有两种:GIF动画和代码实现. 第一种:借助于Gif制作工具软件实现.一般是和第三方开源的GifView(https://githu ...
- 用java实现冒泡排序法
一.基本思路: 冒泡排序是一种简单的交换类排序.其基本思路是,从头开始扫描待排序的元素,在扫描过程中依次对相邻元素进行比较,将关键字值大的元素后移.每经过一趟排序后,关键字值最大的元素将移到末尾,此时 ...
- 在Windows Azure上搭建SSTP VPN
在国内,VPN是用来干嘛的大家都懂的.很久之前我尝试用Azure的Virtual Network搞VPN结果惨败了.最近微博上有基友写了篇文章亲测可行,原文在这里.可惜是英文的.所以我的这篇文章仅仅是 ...
- linux下shell统计文件目录下所有代码行数
功能,统计某一目录下所有文件代码行数: 例如统计某一目录下所有.c结尾的文件代码行数:find . -name "*.c"|xargs cat|grep -v ^$|wc -l ^ ...
- Linux编程
头文件一般位于usr/include目录下,各个子类的头文件位于include子目录下 不知道某个“库函数”需要哪些头文件,使用“man 函数”即可查看 sys/types.h 基本系统数据类型 s ...