使用@media实现IE hack的方法
文章简介:众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的。比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直接无视这些代码。今天我想为大家介绍的是使用@media实现IE hack的方法. |
随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的特殊效果。
众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的。比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直接无视这些代码。今天我想为大家介绍的是使用@media实现IE hack的方法:
仅IE6和IE7识别
@media screen\9 { .selector { property: value; } }
仅IE6和IE7、IE8识别
@media \0screen\,screen\9 { .selector { property: value; } }
仅IE8识别
@media \0screen { .selector { property: value; } }
仅IE8-10识别
@media screen\0 { .selector { property: value; } }
仅IE9和IE10识别
@media screen and (min-width:0\0) { .selector { property: value; } }
仅IE10识别
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here */ }
上面几个@media配合“\”、“\0”和“\9”就能让不同版本的IE识别,那么具体项目中我们要怎么使用呢?
打个比方,如果你的body中设置了一个红色的背景,而想让不同版本IE变成别的颜色,那么我们就可以这么操作
body { background: red; } /* IE6、IE7变成绿色 */ @media all\9 { body { background: green; } } /* IE8变成蓝色 */ @media \0screen { body { background: blue; } } /*IE9和IE10变成黄色*/ @media screen and (min-width:0\0) { body { background: yellow; } }
IE的Hack方法我向来不提倡使用,但这些方法很少有人知道,贴上来与大家分享,希望在不得已的情况之下,这些hack方法能帮你解决问题,特别是国内的苦逼前端人员。
使用@media实现IE hack的方法的更多相关文章
- Medial Queries的另一用法:实现IE hack的方法
所谓Medial Queries就是媒体查询. 随着Responsive设计的流行,Medial Queries可算是越来越让人观注了.他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设 ...
- 利用@media实现IE hack
虽然对IE深恶痛绝,却不能拒绝. 使用@media实现IE hack的方法,以记之. 仅IE6和IE7识别@media screen\9 { .selector { property: value; ...
- CSS之Medial Queries的另一用法:实现IE hack的方法
所谓Medial Queries就是媒体查询. 随着Responsive设计的流行,Medial Queries可算是越来越让人观注了.他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设 ...
- CSS HACK的方法
所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6.IE7 共用 *height: 100px; IE ...
- media server died的解决方法【转】
本文转载自:https://blog.csdn.net/class_brick/article/details/78086261 在对MediaRecord进行初始化时添加上 mMediaRecord ...
- Medial Queries的另一用法——实现IE hack
众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...
- 媒体查询hack
随着Responsive设计的流行,Medial Queries可算是越来越让人观注了.他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果.这个早前在 w3cplus已 ...
- C#中Windows Media Player控件使用实例|方法
Windows Media Player控件Windows Media Player是一种媒体播放器,可以播放当前最流行的音频.视频文件和大多数混合型的多媒体文件.为了便于程序的开发,Visual S ...
- CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
随机推荐
- 转——使用Axure制作App原型应该怎样设置尺寸?
想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科.这里金乌直接给大家提供一个常用的移动设备尺寸列表, ...
- 20+富有创意的BuddyPress网站
如果你想构建自己的社区网站,如果你熟悉WordPress,那么用BuddyPress构建它吧!它确实太强大了,本文整理了20个富有创意的BuddyPress网站,看看它们,你也能拥有! 原文地址:ht ...
- 轻松学习Linux之认识Shell
Shell是一个命令解释器提供了用户与内核进行交互操作的一种接口shell,编程对於系统管理员或是一般使用者都相当有用,除了自动化,还可写出一些有趣的小工具,Linux本身有各种版本一 ...
- cocos2d-x 3.2读取xml和json练习
读取和生成xml文件: #include "tinyxml2/tinyxml2.h" using namespace tinyxml2; void HelloWorld::make ...
- Determining Equality of Objects
[Determining Equality of Objects] If you need to determine whether one object is the same as another ...
- PhysX
[PhysX] 1.施加力: ))) { //施加一个力,X轴方向力度为1000,Y轴方向力度为1000 addFrceObj.rigidbody.AddForce (, , ); } ))) { / ...
- Leetcode237:Delete Node in a Linked List
Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...
- ZOJ1648 Circuit Board(线段相交)
裸的判断线段相交
- c++,windows中的字符问题
string与char*的转换方法 string a; char *b=a.c_str(); string a=new String(b); a=b; LPCWSTR是unicode的字符串,LPCS ...
- 【转】删除已经存在的 TFS Workspace
删除已经存在的 TFS Workspace 分类: TFS2010-03-03 16:59 1239人阅读 评论(2) 收藏 举报 serverpathcommandcachefilegoogle 工 ...