针对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 ...
随机推荐
- U深度U盘安装win7系统教程
① 使用u深度u盘启动盘制作工具制作好的启动u盘 点击查看 ==>u深度u盘启动盘制作教程 ② ghost win7系统镜像文件(自可上网自行搜索ghost xp系统) 第一步:下载win7系统 ...
- OO第一阶段总(休)结(养)分(生)析(息)
第一次作业: 这是一次让我认识到ddl面前潜力真的可以无限大的作业. 一直以为OO是一门和数据结构一样先用几周的时间讲讲Java然后写写”Hello World”小程序再开始讲正课的我(我也不知道为什 ...
- 前端vue项目-关于下载文件pdf/excel(三)
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...
- asp.net webapi 返回json结果的方法
第一种: public static void Register(HttpConfiguration config) { //1.将默认的xml格式化程序清除 GlobalConfiguration. ...
- 数据库-->表操作
一.MySQL存储引擎 # InnoDB MySql 5.6 版本默认的存储引擎.InnoDB 是一个事务安全的存储引擎,它具备提交.回滚以及崩溃恢复的功能以保护用户数据.InnoDB 的行级别锁定以 ...
- 第二篇 界面开发 (Android学习笔记)
第二篇 界面开发 第5章 探索界面UI元素 ●The Android View Class ●△Widget设计步骤 需要修改三个XML,以及一个class: 1)第一个xml是布局XML文件 ...
- Zynq-PL中创建AXI Master接口IP及AXI4-Lite总线主从读写时序测试(转)
转载:原文 http://www.eefocus.com/antaur/blog/17-08/423751_6cc0d.html 0. 引言 通过之前的学习,可以在PL端创建从机模式的AXI接口IP ...
- a recipe kindly provided by Dimas for kikuchi
https://sianipar17.com/2017/12/14/tutorial-for-teleseismic-body-wave-inversion-program/
- capjoint conversations with Chenweiwen
This event is quite small for teleseismic stations, which means it will be more strongly affected by ...
- Oracle hint手动优化
例子 select/*+FULL(fortest)*/ * from fortest where id = 2000000 //使用0.70s时间 select* from fortest where ...