针对IE浏览器的CSS样式(兼容性)
1. IE hacks:
"_" 是IE6 专有的hack;
"\9" 对IE6-IE10都有效;
"\0"对IE8-IE10都有效;
"\9\0"对IE9-IE10都有效;
优点:
CSS hacks 内嵌在普通的 CSS 里面,不会产生更多 HTTP 请求。CSS hacks 内嵌在普通的 CSS 里面,编写时比较方便。
缺点:
它是不标准的产物。内嵌在其他 CSS 中,不便维护。尤其是当 hacks 的数量比较多的时候维护简直是个恶梦。内嵌在其他 CSS 中,即使在非 IE 浏览器中也会被加载,浪费资源。
2.条件注释 CSS:
<!--[if IE 6 ]>
< link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
< ![endif]--> <!--[if lte IE 8 ]>
<link rel="stylesheet" type="text/css" media="all" href="./assets/css/ie8.css" />
<![endif]-->
条件注释是一种 IE 专有的、对常规(X)HTML 注释的 Miscrosoft 扩展。从 W3C 标准来说,它也是不标准的产物,但它是微软官方推出的针对 IE 进行开发的方式,
并且条件注释对于其他所有浏览器作为常规注释出现,因此对其他浏览器无害
优点:
条件注释 CSS 的好处是在独立的 CSS 文件中编写,能准确控制在特定的 IE 中加载,不会造成资源浪费,并且便于维护。
缺点:
就是会产生多余的 HTTP 请求,尤其是当你需要兼容的 IE 版本很多的时候,你就需要产生多个 HTTP 请求,这对于本来通道数目就少的低版本 IE 来说无疑会影响页面加载速度。
以上两种方法不是很好,以下的方法相对来说会好点;
3.条件注释 html 标签:
这种方案也是利用条件注释,但并不是对 CSS 使用条件注释,而是对 html 标签使用条件注释,引入不同的 class ,从而区分不同的 IE 以及其他浏览器;
<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->
然后把对特定 IE 的 CSS 加上相应的 class 并写在普通 CSS 文件里即可: .ie6 .header .nav {margin:0 0 0 ;padding:0 0 0 0; }
优点:
条件注释表达式的好处在于不会产生多余的 HTTP 请求;
缺点:
由于这些针对特定 IE 的 CSS 与普通的 CSS 放在一起,即不是相应的 IE 也会被加载,因此如果 CSS 数目比较多的话就会像使用 hacks 那样,造成浪费;
以上方法:需要根据具体情况选择方法。
针对IE浏览器的CSS样式(兼容性)的更多相关文章
- 针对不同浏览器,CSS如何写
我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6.微软IE7.微软IE8.火狐浏览器.谷歌浏览器有一些不同,如宽度.高度等地方有相差误.IE6比较老的版本浏览 ...
- 关于只针对ie7浏览器的css问题
如代码: .centerDiv .search_k2{ margin-left: 18px; *margin-left: 9px; margin-top: 10px; height: 40px;} 中 ...
- style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍
style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样 ...
- 针对IE浏览器里面CSS的Bug解决方法
IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是 ...
- 浏览器间CSS样式兼容问题
1.display:table居中显示 在chrome和safari浏览器上兼容问题 2.滤镜 在chrome浏览器中能正常显示,在360浏览器中不能正常显示 3.省略号问题 对于一行显示,基本上对所 ...
- 修改chrome浏览器默认css样式的方法
最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...
- IE8 CSS样式兼容性清单
IE8对于CSS2.1是完整支持的,对于CSS3则只是部分支持.下文中只列出IE8完全支持及完全不支持的样式,对于. 注:下文中的E.F均指html标签名,如p,img等. At-rules At类规 ...
- 针对铁定浏览器的css选择符
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child ...
- 有关css和js针对不同浏览器兼容的问题
首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox.theworld.maxth ...
随机推荐
- Springboot+MyBatis+mysql+jsp页面跳转详细示例
SpringBoot与MyBatis搭建环境,底层数据库为mysql,页面使用JSP(官网上不推荐使用jsp),完成从数据库中查询出数据,在jsp页面中显示,并且实现页面的跳转功能. 项 ...
- wordpress有用的插件
代码高亮 https://wordpress.org/plugins/crayon-syntax-highlighter/ 这个貌似比较好用 百度UEditor(富文本编辑器) https://www ...
- 3.9 C++多继承
参考:http://www.weixueyuan.net/view/6366.html 总结: C++中一个派生类中允许有两个及以上的基类,我们称这种情况为多继承 使用多继承可以描述事物之间的组合关系 ...
- 插入排序算法 Java实现
插入排序算法是算法排序中的一种: 该算法是假设已有序列是有序序列,从首元素(首元素为单个元素,肯定是有序的...)开始分析,对其他元素的位置进行有序的确定: 以算法为例: public class I ...
- webpack+vue+vueRouter模块化构建小demo实例超详细步骤(附截图、代码、入门篇)
说明:本demo使用yarn代替npm指令来下载一系列依赖,有详细指令说明:使用WebStorm下Terminal来输入指令: >开始(确认已经安装node环境和yarn包管理工具) 1.新建项 ...
- 2019.3.5 L261 Are All Our Organs Vital?
Medicine has not always shown a lot of respect for the human body. Just think about the ghoulish dis ...
- L259
Few things can feel as crushing as being rejected by someone who you're either dating or romanticall ...
- display总结 overflow知识
# display总结:# inline总结: # 1.同行显示, 就相当于纯位文本, 当一行显示不下, 如就是一字显示不下, 那么显示不下的那个字会自动换行;# 和纯文本的区别就是有纯文本的概念, ...
- 爬虫系列3:scrapy技术进阶(xpath、rules、shell等)
本文主要介绍与scrapy应用紧密相关的关键技术,不求很深入,但求能够提取要点.内容包括: 1.xpath选择器:选择页面中想要的内容 2.rules规则:定义爬虫要爬取的域 3.scrapy she ...
- 4--Python入门--Python数据集合类型--集合
在基础数据类型的基础上,Python有6中数据集合的类型: 列表list,最常用的数据类型,以[]为标识 元组tuple,和list很相似,但是不能二次赋值,用()标识 集合set,和list类似,但 ...