浏览器兼容处理

条件注释:

两个--和左中括号[之间不能有空格,否则无效

[1]IE9-(<!--[if IE]><![endif]-->)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<!--[if IE]>
<div class="box" id="box"></div>
<![endif]-->
</body>
</html>

  [2]仅单一IE(<!--[if IE 6]><![endif]-->);

[3]大于 gt ||  大于等于 gte || 小于 lt || 小于等于 lte(<!--[if gte IE 8]><![endif]-->)

[4]非IE(IE10+也能识别),此处多加的<-->,在IE中被当作内部注释,而在非IE浏览器中会闭合之前的注释(<!--[if !IE]><--><![endif]-->)

CSS :

1]IE6-(下划线、中划线)(_color:blue;-color:blue;)

[2]IE7-(星号、加号)(*color:blue;+color:blue;)

[3]IE10-(\9)(color:blue\9;)

[4]IE8+(\0)(color:blue\0;)

[5]IE9、IE10(\9\0)(color:blue\9\0;)

选择器前缀法:

[1]IE6-(*html)

IE7(*+html)

IE8(@media \0)

IE9+及其他非IE浏览器(:root)

[6]chrome、safari、opera(@media screen and (-webkit-min-device-pixel-ratio:0))

时间: 2024-08-12 13:09:40

浏览器兼容处理的相关文章

浏览器兼容 各浏览器的Hack写法 [出处:W3CPLUS]

Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果.总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用,然后借助条件样式,使用

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

关于浏览器兼容问题及hack写法

浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Google Chrome ( WebKit ) 2.css hack 解决浏览器兼容的主要方法是css hack 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. IE6 IE7 IE8 Fire

浏览器兼容问题汇总(持续更新)

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器

【转】Web前端浏览器兼容初探

原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态...) 现在看来,之前的想法都是不对的,我们诚然应该追求最新的浏览器使用

使用 audio 和 embed 实现浏览器兼容的网页声音播放

使用 audio 和 embed 实现浏览器兼容的网页声音播放 学习参考源码如下: function playSound() { var borswer = window.navigator.userAgent.toLowerCase(); if ( borswer.indexOf( "ie" ) >= 0 ) { //IE内核浏览器 var strEmbed = '<embed name="embedPlay" src="http://www

js快速判断IE浏览器(兼容IE10与IE11)

在很多时候,我们一般采用navigator.userAgent和正则表达来判断IE浏览器版本,下面介绍用IE浏览器中不同特性来判断IE浏览器   1 判断IE浏览器与非IE 浏览器 IE浏览器与非IE浏览器的区别是IE浏览器支持ActiveXObject,但是非IE浏览器不支持ActiveXObject.在IE11浏览器还没出现的时候我们判断IE和非IE经常是这么写的 ? 1 2 3 function isIe(){        return window.ActiveXObject ? tr

浅谈Web前端浏览器兼容问题

对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第

浅谈CSS hack(浏览器兼容)

今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu.com/data/browser).令我感到欣慰的是chrome排第一,chrome一直以来对W3C标准都支持得比较友好,但是图中也反映了使用IE系列的人数也不少,所以我们日常做前端开发的时候还要考虑他们的感受. 以下是正文: 我的前任公司做前端的时候,要求兼容IE8及以上,谷歌,火狐三座大山.因为

浏览器兼容问题innerText nextElementSibling firstElementChild

//浏览器兼容 //获dom对象的innerText的取值 function getInnerText(element){ //判断浏览器是否支持innerText if(typeof element.innerText==="string"){ return element.innerText; }else{ return element.textContent; } } //设置dom对象innerText的值 function setInnerText(element,conte