ie浏览器兼容性的入门解决方案
IE浏览器的兼容性素来是令人头疼的问题,大名鼎鼎的FUCK-IE不是浪得虚名的。
这里使用的解决方案是HACK,具体原理就是针对不同的浏览器写不同的HTML、CSS样式,从而使各种浏览器达到一致的渲染效果。
HTML的兼容写法
HTML的HACK由注释<!-- -->演变而来,在高级浏览器中注释不会被加载,把IE浏览器的兼容代码写在注释中,IE浏览器会识别。
<!--[if IE 6]>
<p>只有IE6认识我</p>
<![endif]-->
<!--[if gte IE 9]>
<h1>大于等于IE9的浏览器能看到</h1>
<![endif]-->
<!--[if lte IE 8]>
<h1 class="red">您的浏览器版本过低(IE8及以下版本),请更新浏览器!</h1>
<![endif]-->
上面三个例子非常简单,聪明的你肯定能举三反一。
实际应用场景的话多是用于添加一些兼容性的JavaScript片段。
CSS的兼容写法
CSS的HACK包括属性的HACK和选择器的HACK。
要提醒的是,设置CSS的HACK要注意CSS样式的层叠性,给同一个元素设置的兼容写法必须写在后面,否则会被层叠掉。
只兼容IE6的HACK(属性)
HACK符号是【-】或者【_】,作为前缀在属性前面,中间不加空格。在属性名前加上这个HACK符号,高级浏览器及其他浏览器会认为这是一个未知的属性,不会加载这个属性,也不会报错。
background-color: red; /* 高级浏览器识别 */
_background-color: pink; /* 仅IE6识别 */
兼容IE6/7的HACK(属性)
HACK符号可以是【`】、【~】、【!】、【@】、【#】、【$】、【%】、【^】、【&】、【*】、【(】、【)】、【+】、【=】、【[】、【]】、【|】、【<】、【>】、【,】和【.】中的任一个字符,作为前缀写在属性前面。
background-color: red; /* 高级浏览器识别 */
!background-color: pink; /* 仅IE6/7识别 */
只兼容IE8的HACK(属性)
HACK符号是【\0/】,必须写在属性值与分号之间,中间不加空格。
background-color: red; /* 高级浏览器识别 */
background-color: pink\0/; /* 仅IE8识别 */
兼容IE8/9/10的HACK(属性)
HACK符号是【\0】,必须写在属性值与分号之间,中间不加空格。
background-color: red; /* 高级浏览器识别 */
background-color: pink\0; /* IE8/9/10识别 */
兼容IE6/7/8/9/10(属性)
HACK符号是【\9】,必须写在属性值与分号之间,中间不加空格。
background-color: red; /* 高级浏览器识别 */
background-color: pink\9; /* IE6/7/8/9/10识别 */
兼容IE6及以下版本(选择器)
HACK符号是【* html】,注意*和html之间有空格,再加一个空格,后面写选择器。
/* 常规写法 */
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: yellowgreen;
}
/* 兼容写法 */
* html .box {
width: 100px;
height: 100px;
background-color: skyblue;
}
兼容IE7及以下版本(选择器)
HACK符号是【,】,英文的逗号,直接写在选择器的后面,不加空格。
.box, {
background-color: #999;
}
还有第二种,HACK符号是【*+html】,加一个空格,后面写选择器。
*+html .box {
background-color: #999;
}
兼容IE6以外的其他版本(选择器)
HACK符号是【html>body】,写在选择器的前面,与选择器之间有一个空格。
html>body .box {
background-color: yellow;
}
兼容IE6/7以外的版本(选择器)
HACK符号是【html>/**/】或【html~/**/】,写在选择器的前面,与选择器之间有一个空格。
html>/**/body .box {
background-color: purple;
}
html~/**/body .box {
background-color: purple;
}
以上就是IE浏览器兼容性的入门解决方案。浏览器的兼容性一直是一个很大难题,对于专业前端开发者来说是一个必须勇敢直面的挑战。而对于非专业前端开发者(比如说我)来说,稍微有了解就好了。
"你别皱眉,我走就好。"
ie浏览器兼容性的入门解决方案的更多相关文章
- JAVASCRIPT 浏览器兼容性问题及解决方案列表
JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...
- CSS 多浏览器兼容性问题及解决方案
兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...
- 笔试常考--浏览器兼容性问题及解决方案(CSS)
问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:css里加: ;;} 备注:这个是最常见的也 ...
- 常见浏览器兼容性问题与解决方案css篇
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 ...
- 常见的浏览器兼容性问题与解决方案——CSS篇
1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...
- 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- PC/H5端各浏览器兼容性问题及解决方案?
概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况 ...
- Javascript 多浏览器兼容性问题及解决方案
一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document. ...
- web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...
随机推荐
- spring5 源码深度解析----- @Transactional注解的声明式事物介绍(100%理解事务)
面的几个章节已经分析了spring基于@AspectJ的源码,那么接下来我们分析一下Aop的另一个重要功能,事物管理. 事务的介绍 1.数据库事物特性 原子性多个数据库操作是不可分割的,只有所有的操作 ...
- Python入门系列【附】进阶教程
如题,本篇将讲解Python提升之路:Python作为语法简单易学的语言,入门容易精通却很难,这是共识,那么为什么会有这样的共识?精通Python的难度在哪里? Python拥有简单.形象.直观的语法 ...
- Flutter 错误捕获的正确姿势
背景 我们知道,在软件开发过程中,错误和异常总是在所难免. 不管是客户端的逻辑错误导致的,还是服务器的数据问题导致的,只要出现了异常,我们都需要一个机制来通知我们去处理. 在 APP 的开发过程中,我 ...
- ssm配置文件
mybatis配置文件SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8"?> <!DO ...
- PHP array_product
1.函数的作用:计算数组元素的乘积 2.函数的参数: @params array 3.例子: <?php $input = [false,true]; print_r(array_product ...
- 【Python秘籍】十进制整数与二进制数的转换
最近在用Python写遗传算法时,发现需要将十进制的整数转换成二进制数,那么怎么来转换呢?当然如果你学过进制转换的有关计算方法,你可以手动编写一些函数来实现,不过总体来说还是比较麻烦的,这里介绍Pyt ...
- 元素定位之css选择器(1)
CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3). 表格部分摘自菜鸟教程:https://www.runo ...
- 3.Linux目录结构与文件管理
1.Linux系统目录结构 Windows: 以多根的方式组织文件 C:\ D:\ E:\ F:\ Linux:以单根的方式组织文件 / 2.文件定义 比如: /etc/hostname,整个文件中包 ...
- Arduino学习笔记⑧ 红外通信
1.前言 红外通信是一种利用红外光编码进行数据传输的无线通信方式,在目前来说是使用非常广泛的.生活中常见电视遥控器,空调遥控器,DVD遥控器(现在估计是老古董了),均使用红外线遥控.使用红外线 ...
- Java根据参数返回相应类
问题初衷:如何根据参数变换方法的返回类型(参数为 类) 解决方案: 下面方法是放在工具类(例:YslRequestUtil) public <T> T response(Object re ...