针对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 ...
随机推荐
- 有多个.h引用时,不能有using namespace std
#include<iostream.h> #include<math.h> //using namespace std; 有多个.h引用时,不能有这个,否则无法运行. void ...
- MySQL 数据库备份策略:全备与增量备份
一.备份策略1.周日全备份,周一至周六增量备份2.全备份目录/u03/backup/innobackup/full_backup3.增量备份目录/u03/backup/innobackup/incre ...
- SpringBoot 上传、下载(四)
工程目录结构 完整代码: 1.pom.xml 首先当然是添加依赖,用到thymeleaf模板渲染html页面 <project xmlns="http://maven.apache.o ...
- Java四个常用正则表达
1.查询 以下是代码片段: String str="abc efg ABC";String regEx="a|f"; //表示a或fPattern p=P ...
- DevExpress WPF v18.2新版亮点(五)
买 DevExpress Universal Subscription 免费赠 万元汉化资源包1套! 限量15套!先到先得,送完即止!立即抢购>> 行业领先的.NET界面控件2018年第 ...
- UGUI动态绑定事件
using System.Collections.Generic;using UnityEngine;using UnityEngine.EventSystems;using UnityEngine. ...
- <Codis><JedisPool><DeadLock>
Overview Background: I start a thread [call thread A below]in Spark driver to handle opening files i ...
- python实现图的遍历(递归和非递归)
class graph: def __init__(self,value): self.value=value self.neighbors=None # 图的广度优先遍历 # 1.利用队列实现 # ...
- C++面试常见考点
这两周参加了3家公司的面试,一家是做嵌入式的外企,一家是做智能家居的初创公司,一家是做网络分析的公司. 通过参加面试,越发的觉得语言只是基础,虽然都是计算机领域,但是不同的业务肯能用到的技术不同,所以 ...
- JAVA_工具类01_ResourceBundle
在java.util.ResourceBundle包下,是java提供的工具类 ResourceBundle只能读取properties文件中的内容,可以使用ResourceBundle的静态方法来创 ...