HTML兼容问题——HACK技术

有话先说:本文的目的主要是向大家描述一下我们在遇见IE8版本一下以及Firefox兼容的问题。

针对不同的浏览器写不同的CSS的过程,这就叫CSS hack,也叫写CSS hack,相信您会对一些比较不易解决的兼容问题有一定的兴趣。

注意点:

网上很多资料中常常把!important也作为 个hack 段,其实这是 个误区。!important常常被我们 来更改样式, 不是兼容hack。造成这 个误区的原因是IE6在某些情况下不主动识别!important,以 于常常被 误 做识别IE6的hack。可是, 家注意 下,IE6只是在某些情况下 不识别(ie6下,同 个 括号 对同 个样式属性定义,其中 个加important 则important标记是被忽略的,例:{background:red!important; background:green;} ie6下解释为背景 green,其它浏览器解释为背景 red;如果这同 个样式在不同 括号 定义,其中 个加important 则important发挥正常作 ,例:div{background:red!important} div{background:green},这时所有浏览器统一解释为背景色为红色)

CSS HACK区别IE6、IE7、IE8、Firefox兼容问题

1.区别IE和非IE浏览器

例:

#tip{ background:blue;/* IE背景藍 */ background:red\9;/*IE6、IE7、IE8背景紅 */ }

2.区别IE6,IE7,IE8,FF

区别符号:「\9」、「*」、「_」

例:#tip{ background:blue;/*Firefox背景变蓝 */ background:red\9;/*IE8背景变红色*/ *background:black;/*IE7背景变黑色*/ _background:orange;/*IE6背景变橘 */ }

说明:因为IE系列浏览器可读「\9」, IE6和IE7可读「*」( 字号),另外IE6可辨识「_」(底线),因此可以依照 顺序写下来,就会让浏览器正确的读取到 看得懂得CSS语法,所以就可以有效区分IE各版本和 IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。

3.区别IE6、IE7、Firefox

区别符号:「*」、「_」

例:

#tip{ background:blue;/*Firefox背景变蓝 */ *background:black;/*IE7背景变 */_background:orange;/*IE6背景变橘 */ }

说明:IE7和IE6可读「*」( 字号),IE6 可以读「_」(底线),但是IE7却 法读取「_」, 于Firefox( IE浏览 器)则完全 法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE7、Firefox

区别符号:「*」、「!important」

例:

#tip{ background:blue;/*Firefox背景变蓝 */ *background:green!important;/*IE7背景变绿 */ }

说明:因为Firefox可以辨识「!important」但却 法辨识「*」, IE7则可以同时看懂「*」、「!important」, 因此可以两个辨识符号来区隔IE7和Firefox。

5.区别IE6、IE7( 法1)

区别符号:「*」、「_」

例:

#tip{ *background:black;/*IE7背景变 */ _background:orange;/*IE6背景变橘 */ }

说明:IE7和IE6都可以辨识「*」( 字号),但IE6可以辨识「_」(底线),IE7却 法辨识,透过IE7 法读取「_」 的特性就能轻鬆区隔IE6和IE7之间的差异。

6.区别IE6、IE7( 法2)

区别符号:「!important」

例:

#tip{ background:black!important;/*IE7背景变 */ background:orange;/*IE6背景变橘 */ }

说明:因为IE7可读取「!important;」但IE6却不 , CSS的读取步骤是从上到下,因此IE6读取时因 法辨识 「!important」 直接跳到下 读取CSS,所以背景 会呈现橘 。

7.区别IE6、Firefox

区别符号:「_」 【 例】:

#tip{ background:black;/*Firefox背景变 */ _background:orange;/*IE6背景变橘 */ }

说明:因为IE6可以辨识「_」(底线),但是Firefox却不 ,因此可以透过这样的差异来区隔Firefox和IE6,有效达 成CSShack。

总结:

希望这些HACK技术总结能够帮到需要帮助的开发者。也希望大家不会再IE系列的兼容问题上纠结的太多!

时间: 2024-11-12 08:48:05

HTML兼容问题——HACK技术的相关文章

CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera

转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩的网络世界,而浏览器则是我们欣赏网络世界的窗口. 以前,浏览器主要有IE和NetScape两家:到现在,各种各样功能强大的浏览器层出不穷.例如:举世闻名的浏览器有Chrome.FireFox.Safari.Opera,常见的"国产"浏览器有遨游.QQ.360.搜狗.UC.世界之窗. 由于不

openwrt-智能路由器hack技术(1)---"DNS劫持"

openwrt-智能路由器hack技术(1)---"DNS劫持" 1   导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所以现在整理拆分一下,从小处写起, 本系列介绍了两个关于智能路由器的hack技术,供大家赏玩一下. 本文提到的两个基于网络的hack技术: DNS劫持 数据抓包 基本本质上就是路由器设备的两个主要网络功能: 网关配置功能 网关数据中转功能 但是用于软件开发的正途,就变换成下面的说法: 网络环境迁移 数据监控 由于大家可

openwrt-智能路由器hack技术(2)---"网路信息监控和窃取"

openwrt-智能路由器hack技术(2)---"网路信息监控和窃取" 1   导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所以现在整理拆分一下,从小处写起, 本系列介绍了两个关于智能路由器的hack技术,供大家赏玩一下. 本文主要介绍openwrt-智能路由器的数据监控功能.(为了维持本文一定的独立性,内容会有所重复). 前一文章: openwrt-智能路由器hack技术(1)---"DNS劫持" 2   概述

1004.Google Hack技术

Google Hack技术 目前黑客利用Google Hack技术来进行入侵或资料收集的时候主要有以下几点: ①.在入侵之前,可以利用Google Hack技术进行信息收集,典型的有比如查找网站后台及网站的拓扑结构等等. ②.当发现或者公布某个漏洞之后,利用Google Hack技术大量收集存在这个漏洞的主机或网站,典型的有许愿版暴库漏洞,利用Google Hack技术找到许愿版之后就暴库,最后得到Webshell. ③.边入侵边搜索,因为我们的入侵过程是一个动态的,我们必须根据不同的情况来区分

CSS Hack技术(一)

这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技术——CSS Hack. 浏览器不兼容有很多方面,有的是javascript脚本不兼容,也有的是样式(CSS)的不兼容,而CSS Hack解决的就是样式不兼容的问题.在样式(CSS)上,各大浏览器都有着许多异常的解析.而本文将会着重讲一下著名的『盒式模型』的浏览器兼容方法!在最后,将会给大家一个几乎

CSS hack技术

首先我们要了解一个概念CSS hack 不同浏览器,比如IE6.IE7.IE8,Mozilla Firefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样. 这个时候我们就需要针对不同的浏览器去定义不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack. CSS Hack的原理:由于不同的浏览器对CSS的支持及解析结果不同以及CSS中

什么是Hack技术?

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack. 原文:https://zhidao.baidu

常用的CSS Hack技术集锦

来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack. CSS Hack常见的有三种形式:CSS属性Hack.CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器. 1.属性级Hack:比如IE6能识别下划线"_"和

经常使用的CSS Hack技术集锦

来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致同样的CSS输出的页面效果不同,这就须要CSS Hack来解决浏览器局部的兼容性问题. 而这个针对不同的浏览器写不同的CSS 代码的过程.就叫CSS Hack. CSS Hack常见的有三种形式:CSS属性Hack.CSS选择符Hack以及IE条件凝视Hack. Hack主要针对IE浏览器. 1.属性级Hack:比方IE6能识别下划线"_"