0

0

HTML兼容问题--HACK技术_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:20:07

|

1253人浏览过

|

来源于php中文网

原创

有话先说:本文的目的主要是向大家描述一下我们在遇见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浏览器

例:

ZOER
ZOER

AI全栈应用开发平台

下载

#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系列的兼容问题上纠结的太多!

 

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

5

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

1

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

1

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

1

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

1

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

52

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

25

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

10

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
swoole进程树解析
swoole进程树解析

共4课时 | 0.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号