使用@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 {

position: relative;

      }

}

仅IE6和IE7、IE8识别

  @media \0screen\,screen\9 {

.el-form-item__label {

position: relative;

      }

}

 仅IE9和IE10识别

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

.el-form-item__label {

position: relative;

      }

}

仅IE10识别

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

.el-form-item__label {

position: relative;

      }

 }

仅IE8-10识别

  @media screen\0 {

.el-form-item__label {

position: relative;

      }

}

仅支持谷歌

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

.el-form-item__label {

position: relative;

      }

}

仅支持火狐

@-moz-document url-prefix() {

 .el-form-item__label {

position: relative;

      }

         }

原文地址:https://www.cnblogs.com/429zk/p/11578420.html

时间: 2024-11-06 21:27:43

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

使用@media实现IE hack的方法

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

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

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

浏览器hack总结 详细的浏览器兼容性解决方法

由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试. CSS Hack 面对浏览器诸多的兼容性问题,经常需要通过CSS样式来调试,其中用的最多的就是CSS Hack.所谓CSS Hack就是针对不同的浏览器书写不同的CSS样式,通过使用某个浏览器单独识别的样式代码,控制该浏览器的显示效果.CSS Hack主要分为两类 CSS 选择器Hack CSS选择器Hack是指通过在CSS选择器的前面,加上一些只有特定浏览器才能识

几个常见CSS错误和解决办法

1.IE6下,当float存在时,margin双倍的问题 解决方法:加display:inline; 例: #content { float: left;     width: 500px;     padding: 10px 15px;     margin-left: 20px;     display:inline; } 2.克服盒子模型的hack 原写法: #main-div{ width: 150px; border: 5px; padding: 20px; } 修正后 #main-d

css在各浏览器中的兼容问题

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

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 复制代码 代码如下: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>; <head> <meta http-equiv=Content-Type conten

【转载】IE浏览器常见的9个css Bug以及解决办法

IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已,有时候需要通过专为IE6或者IE8设计单独的定义.IE浏览器则因此被公认为Web程序员的毒药,虽然在微软官网上并没有提供相关的解决方案,但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的.本文总结了9个IE浏览器上最常见

css+div如何解决内容的溢出

平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱.CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局. 特别是在IE6,如果内容超出对象高度和宽度承载,将会被撑破增高,这个时候我们可以利用以下解决方法. 解决CSS样式 这时我们可以使用CSS overflow样式解决:对应样式overflow:hidden Div{overflow:hidd

实战中总结出来的CSS常见问题及解决办法

一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次. 对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大. 三.一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来. 临时解