css hack技巧有哪些

实例讲解:

Hack应用情境(一)

适用范围:IE:6.0,IE7.0,IE8.0之间的兼容

实例说明:此例中我们使用了渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,此时,我们的IE8已经独立识别。

实例代码:

.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >

Hack应用情境(二)

适用范围:IE:6.0,IE7.0,IE8.0,Firefox之间的兼容 (相关课程推荐:css视频教程

实例说明:大家很容易的可以看出这是情境(一)的加强版,适用于更广泛的环境。其实情境(一)中也已经做到了把火狐与IE游览器区分开来了,现在我们要做的是把火狐从其它游览器中再次识别出来。

大家仔细看下代码,大家会发现其实游览器识别是很简单的。火狐如何识别?对了,IE中对伪类支持不广泛,所以伪类是个不错的途径。(.yourClass,x:-moz-any-link, x:default) 。

注意,这个区分伪类往往IE7也能识别,所以最好还需要把IE7单独识别出来,且此方法对ff3.6 已无效,firefox的区分可以使用@-moz-document url-prefix(){}

实例代码:

.bb{
    height:32px;
    background-color:#f1ee18;/*所有识别*/
    background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
}
.bb, x:-moz-any-link, x:default{
background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */ 
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */ 
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >

Hack应用情境(三)

适用范围:IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容

实例说明:我们现在将再次对我们的CSS进行加强了,使其能识别Safari(Chrome)游览器。这是基于它们的内核webkit来识别的,用法为@media screen and (-webkit-min-device-pixel-ratio:0)

实例代码:

.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (
-webkit-min-device-pixel-ratio:0){
.bb{
background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */ 
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/ 
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >
Image placeholder
前端答疑
未设置
  53人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

ie加载不出css样式的原因有哪些?

ie加载不出css样式的原因有哪些?可能的原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8);2.CSS文件中未指定@charset头声明,导致IE默认使用页面编

css中变换属性有哪些?

css中变换属性有哪些?1、matrixmatrix(,,,,,)以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵2、tra

css属性选择器有哪些?

css属性选择器有哪些?[attribute]用于选取带有指定属性的元素。该选择器选择包含attribute属性的所有元素,不论attribute的值为何。[attribute=value]用于选取带

css中有哪些简写属性?

css中有哪些简写属性?●border属性●margin、padding属性●background属性●font属性●border-radius属性定义简写属性是可以让你同时设置其他几个CSS属性值的

使用css样式表有哪些好处?

使用css样式表有哪些好处?下面给大家总结下CSS的优点:一、CSS的代码更少我们在公共样式类中可以定义具有值的属性,并且能在不同位置使用相同的类,因此我们可以使用较少的代码,来实现更多的功能。更少的

css文本属性有哪些?

css文本属性有哪些?1、text-align控制文本的对齐方式2、text-indent控制文本首行的缩进,px或%都可;3、white-space文档中的空白处属性值:(推荐学习:CSS视频教程)

css颜色属性有哪些?

课程顾问:java开发工程师--学习猿地--送7个上线商业项目 css颜色属性 color:设置文本的颜色。 color-profile:允许使用源的颜色配置文件的默认以外的规范。 opacity:规

数据科学领域的核心技能和新兴技能分别有哪些?

近年来随着大数据的迅速发展,各种各样的数据分析技能也逐渐大热,为了找到数据科学领域目前最常用的技能和未来最流行的应用趋势,我们进行了一项调查。我们确定了数据科学技能的两个主要类别:一个是大多数受访者拥

前端开发人员最困扰的事情有哪些?

前端和后端开发之间的界线正在发生变化。有一些常见的错误会导致前端开发人员增加工作量、浪费时间,本文将介绍一些常见的错误以及如何避免这些错误。公司向他们的开发人员和程序员提出更多的要求,让他们完成与自己

Kubernetes 未来一年会有哪些变化?

试图预测历史上发展最快的开源项目的未来几乎是徒劳的,从谷歌到社区其他成员的“传承”已经发展成为编排的实际标准,从来没有一个项目以这种方式获得了整个企业社区的集体支持。从CNCF成员的长名单就可以看出,

调查:2019年数据分析市场面临的挑战有哪些?

分析和数据科学行业对人才的需求急剧增长,为该行业求职者提供了很多工作机会。无论是500强还是初创企业,每个团队都在使用分析来从数据中获得有价值的信息。然而,在人才、客户定位和收集数据等方面,这个行业仍

jQuery遍历方法有哪些?

jQuery遍历方法有哪些?jquery遍历方法有对象遍历和函数调用两种方式。一、jQuery对象遍历语法:$(集合).each(function(index,item){ //index索引 //i

jquery基本过滤选择器有哪些?

jquery基本过滤选择器:1、first()或者:first选取第一个元素//选择第一个div元素 $('div:first') $('div').first()2、last()或者:last选取最

基于jquery开发的UI框架有哪些?

基于jquery开发的UI框架有哪些?1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源

jquery表单过滤器有哪些?

jquery表单过滤器有哪些?jQuery提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。:enabled:选取所有可用元素:disabled:选取所有不可用元素:check

jquery表单选择器有哪些?

jquery表单选择器有哪些?jquery虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求。所以,jQuery为表单提供了专用的选择器。:input:选取所有inp

jquery有哪些常用事件?

jquery有哪些常用事件?1、$(document).ready()$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和

HTML内联元素有哪些?

内联元素(inlineelement)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、

智慧城市带来的网络威胁有哪些?

如今,中国城市正在疾步向前拥抱智慧时代,我国是全球智慧城市建设最为积极的国家之一。近年来,智慧城市建设步入快车道时代!据不完全统计,中国智慧城市的发展数量已经超过500个,居世界之最。然而,智慧城市给

vue.js有哪些优势?

Vue是什么Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。简而言之:Vue.js是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的A

vue加载优化策略有哪些?

方法一路由懒加载vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏

vue前端UI框架有哪些?

Vue移动端UI框架1、Vux(star:15620)VUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。暂未适配vue-cli@3

基于vue移动端UI框架有哪些?

vuxVUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。文档地址:https://doc.vux.li/zh-CN/演示地址:ht

有哪些常用jQuery UI框架?

jqueryUI框架1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.设计目标是简