使用@media实现IE hack的方法

网页制作Webjx文章简介:众所周知,有些时候为了实现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-spe  

仅支持谷歌

@media screen and (-webkit-min-device-pixel-ratio:0) {

.footer .layout-help { padding-bottom:357px; }

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){} IE10--IE11

@media screen and (min-width:0\0){} IE9--IE11

@media screen\9 {} IE7及以下

@media \0screen\,screen\9 {} IE8及以下

@media \0screen {} IE8

@media screen\0 {} IE8及以上

时间: 2024-10-29 19:07:20

使用@media实现IE hack的方法的相关文章

使用@media实现IE hack的方法,css 兼容ie,解决火狐、谷歌兼容问题

在写项目当中,我们总会遇到兼容各种浏览器,当然包括ie各种版本,在解决ie   css兼容性问题中,比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,但浏览器有时会无视这些代码.那我们可以尝试使用@media实现IE hack的方法. 列如: 仅IE6和IE7识别 @media screen\9 { .el-form-item__label { position: relative; } } 仅IE8识别 @media \0screen { .el-form-item__label {

Medial Queries的另一用法:实现IE hack的方法

所谓Medial Queries就是媒体查询. 随着Responsive设计的流行,Medial Queries可算是越来越让人观注了.他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果. 众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直接无视这些代码.今天我想为大家介绍的是使用@media实现IE hack的方法. 仅IE

CSS HACK的方法

例如:height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6.IE7 共用 *height: 100px; IE7.FF 共用 height: 100px !important; if条件Hack 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> 所有的IE可识别 <![endif]-->

媒体查询hack

随着Responsive设计的流行,Medial Queries可算是越来越让人观注了.他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果.这个早前在 w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读.今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的 特殊效果. 众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用“\0”,“\”和“\9” 来仅让IE某些版本

hack速查表

建议:以标准浏览器为准书写代码,如遇到兼容问题,尝试其他方法解决问题,在万不得已怕情况下,采用HACK解决. 以下是我总结的HACK书写方法: 浏览器:仅限IE6+,FF,safari,chrome,opera;(截止到2011.10.12非IE均为最新版本). 测试环境:windows系统; DOCTYPE:. 标志符 示例 IE6 IE7 IE8 IE9 FF OP SA CH * .eq {*color:#000;} Y Y N N N N N N _ .eq {_color:#000;}

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

hack兼容浏览器

二.CSS HACK的方法首先需要知道的是:所有浏览器 通用 height:100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6.IE7 共用 *height:100px; IE7.FF 共用 height: 100px!important;

Media Queries ---- 媒体查询 @media

随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来 访问你的网站.尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样,但至少要让你的Web页面能适配用户的终端,让他更好的呈现在你的 用户面前.在本节中,将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸),从而让你的页面让用户有一个更好的体验. Media Queries Media Queries是CSS3新增加

Media Queries媒体查询详解

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href=”css/reset.css” rel=”stylesheet” type=”text/css” media=”screen” /><link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all” /><link href=”css/print.css” rel=”s