怎么用css hack处理各浏览器兼容IE6,IE7,IE8,IE9/ FF
第一:什么事浏览器兼容性
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。这个大家都深有体会就不多解释了
第二:出现浏览器不兼容的原因是什么
因为不同浏览器使用内核及所支持的HTML等网页语言标准不同(各浏览器都有自身的HTML标签样式定义);以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱,错位。
第二:什么是css hack
CSS hack由于不同的浏览器,比如IE6,IE7,FF等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
第三:CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。
类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。
选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
书写顺序,一般是将识别能力强的浏览器的CSS写在前面。下面如何写里面说得更详细些。
现在大家对浏览器兼容性一些理论都有一些认知了,下面重点讲解css hack写法
所有浏览器 通用 height: 100px;
IE专用 height:100px\9;
IE6专用 _height: 100px;
IE6IE7专用 *height:100px;
IE7专用 *+height: 100px;
IE8专用 height:100\0;
IE7、IE8、FF 共用 height: 100px!important;
因为css样式有优先级,在写css hack时候也要讲究顺序,请看下面例子
一、比如要分辨IE6和firefox两种浏览器,可以这样写:
background:green; /* for firefox */
*background:red; /* for IE6 */ (both IE6 && IE7)
我在IE6中看到是红色的,在firefox中看到是绿色的。
解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
二、css hack:怎么区分IE6,IE7,firefox呢?
下面我将分层次的讲解两两之间的用法在说三者一起css hack怎么写
①区别IE6与FF
background:red;/*FF aiin.sinaapp.com*/
*background:blue;/*IE6 aiin.sinaapp.com*/
②区别IE6与IE7(因为*对IE6和IE7都支持那么就要考虑顺序的问题的了)
*background:blue;/*IE6和IE7*/
_background:yellow;/*IE6 aiin.sinaapp.com*/
IE7背景是蓝色,由于IE6背景开始蓝色最后是黄色,CSS样式都是以最后为标准的所以IE6背景是黄色。
③区别IE7与FF(方法和①一样)
④区别FF,IE7,IE6三者
background:red;/*FF*/
*background:blue;/*IE7*/
_background:yellow;/*IE6*/
好了现在大家应该能理解三者的用法了!
提醒:IE都能识别*;标准浏览器(如FF)不能识别*;IE6能识别*,某些情况下不能识别 !important
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
怎么用css hack处理各浏览器兼容IE6,IE7,IE8,IE9/ FF的更多相关文章
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明
自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...
- 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法
HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...
- CSS兼容IE6 IE7 IE8 IE9 Firefox的总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 给Select赋值 innerHTML 不兼容IE6\IE7\IE8\IE9
<select class="b-select" id="location-province" name="Province" def ...
- 针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法
首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!importan ...
- CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
- 下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...
随机推荐
- 数据库中间件MyCat学习总结(2)——MyCat-Web原理介绍
Mycat是一个分库分表的基于java开发的数据库中间件,使用过程中需要有一个监控系统,mycat-web应运而生.mycat-web是一个使用SpringMVC + Mybatis的监控平台,使用常 ...
- 轰炸III
题目背景 一个大小为N*M的城市遭到了X次轰炸,每次都炸了一个每条边都与边界平行的矩形. 题目描述 在轰炸后,有Y个关键点,指挥官想知道,它们有没有受到过轰炸,如果有,被炸了几次,最后一次是第几轮. ...
- 用xshell5连接虚拟机,显示Could not connect to '192.168.3.128' (port 22): Connection failed.
原因:虚拟机上没有安装或者没有启动ssh 解决: 1.安装sshserver sudo apt-get install openssh-server 2.启动ssh服务 sudo service ss ...
- STM8S PWM 应用 呼吸灯
//主功能接受:使用MCU STM8S105C6 的PWM通道2 PC2 来做呼吸灯 已经验证OK,呵 //呵,这个PWM设置刚開始用还是有点麻烦,由于是自己摸索.花点时间.还是解决了 . //所用子 ...
- C#根据规则生成6位随机码
#region 获得6位优惠码 zhy public static string CreatePromoCode(string code) { if (code == "") { ...
- 项目构建之maven篇:1.环境搭建
maven下载: 下载地址 环境变量设置 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd29iZW5kaWFua3Vu/font/5a6L5L2T/fon ...
- U4699 鸡蛋
U4699 鸡蛋 0通过 37提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 调皮的kkk准备恶搞他的同学兼朋友——你! 题目描述 kkk准备从楼上扔鸡蛋下来砸在lz ...
- java反射中getDeclaredMethods和getMethods的区别
getDeclaredMethods() 返回 Method 对象的一个数组,这些对象反映此 Class 对象表示的类或接口声明的所有方法,包括公共.保护.默认(包)访问和私有方法, ...
- Java —— 正则表达式
0. 注意 正则表达式里的点号(.),可以匹配除换行符之外的所有字符 Java 语言同其他语言中的正则表达式的不同在于: 对 \(反斜线)的不同处理 \\:其他语言中,表示在正则表达式中插入普通的反斜 ...
- 可写可选dropdownlist(只测试过ie)
页面: 报废申请人:<asp:TextBox ID="txtPUSER" runat="server" Width="70px" Cs ...