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 ...
随机推荐
- 值类型,引用类型,栈,堆,ref,out
在网上收集... C#的值类型,引用类型,栈,堆,ref,out C# 的类型系统可分为两种类型,一是值类型,一是引用类型,这个每个C#程序员都了解.还有托管堆,栈,ref,out等等概念也是每个C# ...
- JavaScript数学揭密之函数与勾股定理
一.函数 function show(n){ return n*2; } alert( show(2) ); alert( show(3) ); alert( show(4) ); 二.勾股定理 1. ...
- entity refenrece 在views中的运用
在一个content type中有一个field是entity reference, 那么这个字段的设置过程中会指定一个entity type和content type和一个具体内容的选择器, 然后到 ...
- mysql spider之拆库无忧
数据库的三板斧 先上MySQL,之后再上读写分离,然后呢? 后面典型的做法是垂直拆库和水平分表. 一旦数据库拆了之后,代价就来了. 1.事务不能跨库了(少,但是很重要,可以适当改写) 2.相关的关联查 ...
- controller 监控Unix性能信息
linux系统需要有RPC(Remote Procedure Call Protocol),远程过程调用协议,通过安装rpc.rstatd程序,启动其服务,就可以给远程机器提供信息,即Lr可以获取到该 ...
- 关于http响应内容压缩的一点小积累。
1.在tomcat的server.xml配置文件中,添加上背景颜色为绿色的配置,服务器就会自动压缩 <Connector port="80" maxHttpHeaderSiz ...
- Git入门及上传项目到github中
最近需要将课设代码上传到Github上,之前只是用来fork别人的代码. 这篇文章写得是windows下的使用方法. 第一步:创建Github新账户 第二步:新建仓库 第三部:填写名称,简介(可选), ...
- Leetcode--Add two number
地址:https://leetcode.com/problems/add-two-numbers/ 代码: class Solution { public: ListNode* addTwoNumbe ...
- 第四周 更新Scrum站立会议
项目名称:连连看游戏(C#) 小组名称:4Boys 小组成员:武志远.李权.张金生.张政 站立会议内容 昨天完成的: 1.张金生主要介绍了自己完成了游戏界面 2.武志远主要负责查阅关于技术方面的资料, ...
- 张艾迪(创始人):出现在世界224C之前的这些时间
出现在世界224C之前的这些时间 坐在大巴车上.用手塞住耳朵.繁杂的大巴车上.总会听见不喜欢听的声音.那时只有22.23岁的我.就像发明一些东西把所有不喜欢的声音都屏蔽掉.就像防火墙一样.那时候拥抱所 ...