首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS兼容性的一些Hack方法

important;color:green; 棕色 N N Y N Y N Y N Y Y 说明:在标准模式中 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9/IE10都生效...demo2实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序 IE6显示为:绿色, IE7显示为:黑色, IE8显示为:红色, IE9显示为:蓝色, Firefox.../Chrome显示为:橘色, (本例IE10效果同IE9,Opera最新版效果同IE8) demo3实例也是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序 IE6显示为...:红色, IE7显示为:蓝色, IE8显示为:绿色, IE9显示为:粉色, Firefox/Chrome显示为:橘色, (本例IE10效果同IE9,Opera最新版效果也同IE9为粉色) demo4实例是用于区分标准模式下...使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。

1.2K30

前端翻译:Activating Browser Modes with Doctype

以前,各浏览器的怪异模式各不相同。IE6789的怪异模式其实就是IE5.5的文档模式,而其他浏览器的怪异模式就稍微与近标准模式有偏差而已。...在准标准模式下,单元格内仅含图片时,单元格的高度与标准模式的计算是不同的。         在XML模式下,选择器有不同的大小写行为。...IE8有4种模式:IE5.5怪异模式,IE7标准模式,IE8准标准模式和IE8标准模式;IE9有7种模式:IE5.5怪异模式,IE7标准模式,IE8准标准模式,IE8标准模式,IE9准标准模式,IE9标准模式和...IE9XML模式;IE10有11中模式,IE5.5怪异模式,IE7标准模式,IE8准标准模式,IE8标准模式,IE9准标准模式,IE9标准模式,IE9XML模式,IE5.5怪异模式,IE7标准模式,IE8...用户没有选择使用IE7模式来显示所有网站;         8. 网页的父框架没有使用兼容性模式。     在IE8、9中使用兼容性视图,实际上就是使用模拟IE7模式。

98170
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端必看!各大浏览器 CSS Hack 收集

    可以识别,所以此样式在IE6中实际设置对象的宽度为200px,后面的把前面的给覆盖了,而其他浏览器不识别_width不会执行_width:200px;这句样式,所以在其他浏览器中设置对象的宽度就是300px...注意:我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器(chrome)、火狐(Mozilla Firefox)即可,至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核...:20px;在ie6中距左侧对象的实际显示距离是40px,而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为:....:IE8、IE9支持,opera部分支持 6.9? :IE8部分支持、IE9支持 7.9?...//IE7 _color:#EBEBEB; //IE6 } 可以看出,利用字符识别无法区分IE8和IE9,我们可以从伪类的识别来区分 element{ color:#6669;?????

    1.6K130

    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    如下面的例子,在IE8进行浏览时,将会使用IE7的标准模式进行渲染,因为他本身不支持IE9和IE10。...,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案...另外还有一起其他的解决方案,例如google的 ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器...[endif]–> 使IE5,IE6,IE7,IE8兼容到IE9模式 的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

    4K20

    浏览器兼容

    六、处理兼容问题的方法 ---- 1、选择合适的框架 (1)Bootstrap (>=ie8) (2)jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9) (3)Vue (>=...ie9) (4)react(兼容ie8) 不同的框架兼容的浏览器不一样,在开发之前需要留意一下 2、条件注释(又叫IE条件注释) 条件注释 (conditional comment) 是于HTML源码中被...我们需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。...七:常见css属性的兼容情况 inline-block: >=ie8 min-width/min-height: >=ie8 :before,:after: >=ie8 div:hover: >=ie7...inline-block: >=ie8 background-size: >=ie9 圆角: >= ie9 阴影: >= ie9 动画/渐变: >= ie10 八:处理兼容的开发工具 html5shiv.js

    1.9K52

    CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    IE6识别 * 、_     IE7识别 * 、+     IE8识别 * 、\9,\0     只有IE8识别  \0/         ie9只识别:\9     FF什么都不识别 .test{        ...color:#09F\0; /* IE8/9 */         color:#09F\0/; /* IE8 only */ } :root .test { color:#963\9; } /* IE9...;的实际宽度是320px;而在IE6中,div的完整宽度是width,所以 这个div和下面的div宽度一致。        ...important标记,可以设置Firefox中的width值为IE6中的width值减去padding值,这样就实现了Firefox与IE6的padding效果尺寸兼容。        ...padding的问题 首先我们说说firefox和IE对CSS的宽度显示有什么不同:    其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。

    2.2K40

    CSS常见兼容性问题总结

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。 这里谈到的浏览器,主要指IE6/IE7/IE......important; color: #000;} test1 test2 说明:在标准模式中 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9.../IE10都生效 “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack “\9\0″ 只对IE9/IE10生效,是IE9/10的hack (3)选择器前缀法,顾名思义,就是给选择器加上前缀...解决办法是给其添加属性: -webkit-text-size-adjust: none; (9)png24位的图片在IE6下面会出现背景,所以最好还是使用png8格式的   (10)因为存在两种盒子模式...:IE盒子模式和W3C标准模式,所以对象的实际宽度也要注意。

    1.1K30

    前端面试题-CSS Hack

    一、CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果...(3)实际项目中 CSS Hack 大部分是针对 IE 浏览器不同版本之间的表现差异而引入的。 四、CSS Hack书写顺序 一般是将适用范围广、被识别能力强的 CSS 定义在前面。...6.1 IE浏览器各版本 CSS hack 对照表 hack 写法 实例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S)...important;color:green; 棕色 N N Y N Y N Y N Y Y 6.2 IE浏览器标准模式 (1)“ - ″IE6 生效,专有的 hack (2)“ \9 ″ IE6 /...IE7 / IE8 / IE9 / IE10 都生效 (3)“ \0 ″ IE8 / IE9 / IE10 都生效 (4)“ \9\0 ″ IE9 / IE10 生效 七、CSS Hack 选择器前缀法

    73040

    CSS hack总结

    有时,我们为了让一些外观在不同浏览器中做保持一致。就不得不用css hack。下面是常用的css hack。 添加标识浏览器的类名 做法是,用js来识别浏览器,然后在文档根节点添加类名。...对火狐做些处理 */ .weblit .sth{} /* 对webkit做些处理 */ 实现见https://github.com/rafaelp/css_browser_selector 条件注释 条件注释的内容只会在符合条件的浏览器中显示...条件注释只在IE5到IE9(包含)中工作。所以,如果要专门为ie加样式或脚本,可以用条件注释。 常见的条件注释如下 IE6版本有效 <!..._color:red;/*IE6支持*/ *color:red;/*IE6、IE7支持*/ +color:red;/*IE7支持*/ *+color:red;/*IE7支持*/ color:red\9;.../*IE6、IE7、IE8、IE9支持*/ color:red\0;/*IE8、IE9支持*/ color:red\9\0;/*IE9支持*/ @mediascreenand(min-width:0\0

    66920

    JS魔法堂:浏览器模式和文档模式怎么玩?

    文档兼容性模式——IE8的新宠   “文档兼容性模式”是对“兼容模式”的扩展,就IE8而言,除了提供怪异模式(Quirks)和IE8标准模式外,还提供了IE7标准模式、模拟IE7模式,而且设置的方式也丰富得多...准标准模式(有限怪异模式)     由于该模式离W3C标准仍然有一段距离,因此被称作准标准模式(或有限怪异模式)。IE6、7的标准模式实际上就是准标准模式,而IE8+才有实质上的标准模式。...DOCTYPE>均没有),是采用怪异模式(Quirks);当有时,均采用浏览器版本对应的标准模式(如IE8就采用IE8标准模式,IE11就采用IE11标准模式)。  ...一直觉得IE9是IE非标准与标准间的过渡带,现在就更加认定是这样了。   也许大家看到这里会更加疑惑,似乎了解上述内容会加重开发的负担(考虑的点更多了)。  ...(官方声IE9+不支持VML,但实际上IE8已经不支持了。)   若作为库或框架开发者,由于文档模式影响大部分JS API,而渲染模式影响各项样式值和获取方式等等,情况会复杂得多。

    2K80

    IE hack技术

    HTML5学堂:我们平日说的IE hack到底是什么,随着浏览器的发展,IE的hack技术也在不断的发生着变化,一起看看最新的IE hack。 何为hack?...行业中存在着各类浏览器,典型的如IE、火狐、谷歌等;另外,即便同样种类的浏览器,也存在着不同的版本,如IE6、IE7……IE11等。...不同浏览器对于CSS的解析机制并不是完全相同的,因此有时会导致页面效果不同,得不到我们所需要的样式。此时,我们可以针对某种浏览器进行样式的设置,从而达到所有浏览器中显示效果的一致性。...; /*IE6、IE7*/ *width:400px; /*IE6、IE7*/ width:200px\9; /*IE6 IE7 IE8 IE9 IE10*/ width:100px\0; /*IE8...IE9 IE10 IE11*/ 注:测试时间为2015年12月月底

    1.3K60
    领券