0

0

IE浏览器兼容问题的几点写法分享

巴扎黑

巴扎黑

发布时间:2017-07-18 17:10:18

|

2054人浏览过

|

来源于php中文网

原创

用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫。此时我们要用到hack。

HACK就是针对不同的浏览器写不同的HTML、CSS样式,从而使各种浏览器达到一致的渲染效果。

下面我们就分别了解一下HTML的hack和CSS的hack。

(一)、HTML的hack

HTML的hack由注释演变而来,在高级浏览器中注释不会被加载,把IE浏览器的兼容代码写在注释中,IE浏览器会识别。

HTML的hack代码模板:

注:

①用于写兼容的注释,标签内首位都要加!感叹号。

②单词都写在一对中括号中

③IE和版本号之间要加空格

④不加比较单词,表示只兼容这一个版本;

比较单词:lt=less than(小于)、lte=less than or equal (小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)

<!--[if IE 6]><p>只有IE6认识我</p><![endif]-->

只要记住这一个模板就知道HTML的兼容怎么写了,下面我们列举几个:

<!--[if gte IE 9]>
       <h1>大于等于IE9的浏览器能看到</h1>
<![endif]-->
<!--[if lte IE 8]>
       <h1 class="red">您的浏览器版本过低,IE8及以下版本不支持新样式,请更新浏览器</h1>
<![endif]-->
单独写给IE6的解决兼容问题的HTML代码:<!--[if IE 6]>
     <script src="js/iepng.js?1.1.11" type="text/javascript"></script>
     <script type="text/javascript">
       EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');
     </script>
<![endif]-->

 

玻璃钢企业网站源码1.5
玻璃钢企业网站源码1.5

本程序源码为asp与acc编写,并没有花哨的界面与繁琐的功能,维护简单方便,只要你有一些点点asp的基础,二次开发易如反掌。 1.功能包括产品,新闻,留言簿,招聘,下载,...是大部分中小型的企业建站的首选。本程序是免费开源,只为大家学习之用。如果用于商业,版权问题概不负责。1.采用asp+access更加适合中小企业的网站模式。 2.网站页面div+css兼容目前所有主流浏览器,ie6+,Ch

下载

(二)、CSS的hack

CSS的hack包括:属性的hack和选择器的hack

设置css的hack要注意的是css样式的层叠性,给同一个元素设置的兼容写法必须写在后面,否则会被层叠掉。

(1)属性的hack

①只兼容IE6的hack

hack符:-或_,当做前缀写在属性前面,中间不加空格

在属性名前面加短横-或者下划线_(原理:高级浏览器及其他浏览器会认为这个前缀符号是一个unknown property name),未知的属性名,不会报错,不予加载。

例:

<span style="color: #000000; font-family: "courier new", courier; font-size: 15px">background:red;    <span style="color: #008000">//高级浏览器识别</span><span style="color: #ff0000">_</span>background:pink;    <span style="color: #008000">//仅IE6识别</span><br/></span>

 

②兼容IE6、7的hack

 hack符: ` ~ ! @ # $ % ^ & * ( ) + = [ ] | , . 中的任一字符,作为前缀写在属性前面

例:

background:red;    //高级浏览器识别!background:pink;    //仅IE6、7识别

 

③只兼容IE8的hack

hack符:\0/,必须写在属性值与分号之间,中间不加空格

background:red;    //高级浏览器识别background:pink\0/;    //仅IE8识别

 

④兼容IE8、9、10的hack

hack符:\0,必须写在属性值与分号之间,中间不加空格

background:red;    //高级浏览器识别background:pink\0;    //IE8、9、10识别

 

⑤兼容IE6、7、8、9、10

hack符:\9,必须写在属性值与分号之间,中间不加空格

 

(2)选择器的hack

给选择器添加hack,这个选择器中的样式都是IE兼容样式,其他高级浏览器不识别,同理给同一个选择器设置的兼容样式要写在高级浏览器可识别的常规样式后面,否则会被层叠

①IE6及以下版本的hack

hack符:* html,*和html之间有空格,再加一个空格,后面写选择器

例:

<span style="color: #008000; font-family: "courier new", courier; font-size: 15px"><span style="color: #000000"><!--常规写法--></span><br/>        .box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: yellowgreen;
        }<br/><span style="color: #000000"><!--兼容写法--></span><span style="color: #ff0000">* html</span> .box{
            width: 100px;
            height: 100px;
            background: skyblue;
        }</span>

 

②IE7及以下版本的hack

hack符:,英文逗号,写在选择器后面,不加空格

例:

.box,{
    background: #999;
    border: 10px solid red;

 

③兼容IE6以外的其他版本的hack

hack符:html>body,写在选择器前面,与选择器之间有一个空格隔开

例:

html>body .box{
    background: yellow;
}

 

④兼容IE6、7以外的版本的hack

hack符:html>/**/或html~/**/,写在选择器前面,与选择器之间有一个空格隔开

例:

html>/**/body .box{
    background: purple;
}

 

用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题。

在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整。现在百度与谷歌都有了一行解决这种兼容性的代码了。如下面的。

办法一

百度也应用了这种方案去解决IE的兼容问题

百度源代码如下

1 nbsp;html>

百度一下,你就知道

7 <script>varwpo={start:newDate*1,pid:109,page:‘superpage’}</script>

可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码!

这句话的意思是强制使用IE7模式来解析网页代码!

在这里送上几种IE使用模式!

2. Google Chrome Frame也可以让IE用上Chrome的引擎:

3.强制IE8使用IE7模式来解析

10 

11 //或者

12 

4.强制IE8使用IE6或IE5模式来解析

13 

14 

5.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

15 

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

1044

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

334

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

213

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

35

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

111

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

77

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

17

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

813

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

97

2026.02.12

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Firebug入门教程
Firebug入门教程

共7课时 | 3.3万人学习

前端最全HTTP基础原理及应用
前端最全HTTP基础原理及应用

共12课时 | 1.8万人学习

后盾网HTML5视频教程
后盾网HTML5视频教程

共38课时 | 8.3万人学习

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

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