小学了一下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识别*/
  }

Hack应用情境（二）
适用范围：IE:6.0,IE7.0,IE8.0,Firefox之间的兼容
实例说明：
大家很容易的可以看出这是情境（一）的加强版，适用于更广泛的环境。其实情境（一）中也已经做到了把火狐与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
>

Hack应用情境（四）
适用范围：IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome全兼容
实例说明：
实例的具体代码在下面实例代码中已经列出，具体效果如此页面的顶端部分效果，您可以通过不同游览器检测该效果。这次我们基本把所有的主流游览器都兼容了，大家来看下代码。Opera的识别有一部分归功于“\0”标记，这个标记只被IE8和Opera识别，特殊的标记往往造就的是我们更广泛的hack手段。下例的代码比较完整，大家可以选择参考。
实例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312"/>
<style type="text/css">
/***************************************** 各游览器兼容CSS **********************************************/

.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) 有效 */
@media all and (min-width: 0px){ .bb{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 仅 Opera 有效 */ }{}

.bb, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下识别 */}
@-moz-document url-prefix(){.bb{background-color:#4eff00;/*仅 Firefox 识别 */}}
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

/* 一般情况下我们区分IE7 只用 +background-color 配合 _background-color 就行了
如果必须写 .bb, x:-moz-any-link, x:default 这样的代码区分 Firefox3.5及以下则谨记此写法对IE7也有效，故在其中要再重写一次 +background-color
或者使用 * +html .bb{background-color:blue;} 方法仅对 IE7 有效。可使用 @-moz-document url-prefix(){} 方法独立区分所有 firefox
*/

.browsers td{width:8%;text-align:center;padding:8px;}}

.browsercolor{color:#333;font-size:18px;font-weight:bold;}

.ie6{background-color:#1e0bd1}

.ie7{background-color:#a200ff}

.ie8{background-color:#00deff}

.firefox{background-color:#4eff00}

.opera{background-color:#4cac70}

.other{background-color:#f1ee18;}

#tipTable td,#tipTable th{border:1px solid black;width:56px;height:16px;text-align:center;}

#wordTable td{margin-left:8px;}

#firefoxTip{display:none;}

#firefoxTip, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下识别 */+display:none/*再区分一次IE7*/}

@-moz-document url-prefix(){#firefoxTip{display:block;/*仅 firefox 识别 */}}

#ChromeTip{display:none;}

@media screen and (-webkit-min-device-pixel-ratio:0){#ChromeTip{display:block;}}{} /* safari(Chrome) 有效 */

@media all and (min-width: 0px){#ChromeTip{display:none\0;} /* 仅 Opera 有效 */ }{}
</style>
</head>
<body>
<table class="browsers" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>IE6</td>
<td></td>
<td>IE7</td>
<td></td>
<td>IE8</td>
<td></td>
<td>Firefox</td>
<td></td>
<td>Opera</td>
<td></td>
<td>Safari(Chrome)</td>
<td></td>
</tr>
<tr class="browsercolor">
<td class="ie6">IE6</td>
<td></td>
<td class="ie7">IE7</td>
<td></td>
<td class="ie8">IE8</td>
<td></td>
<td class="firefox">Firefox</td>
<td></td>
<td class="opera">Opera</td>
<td></td>
<td class="other">Safari(Chrome)</td>
<td></td>
</tr>
</table>
<div class="bb">
<span style="display:none;display:block\0;display:none\9;">Opera的辨别色是深绿色，Opera游览器很时髦么。</span >
<span id="firefoxTip">Firefox的辨别色是浅绿色，Firefox是很强大的游览器。</span >
<span id="ChromeTip">Safari和Chrome的辨别色是金黄色，Safari和Chrome使用的都是Webkit内核</span >
</div>
</body>
</html>

小学了一下css hack的更多相关文章

CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
CSS Hack
CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...
css3复杂选择器+内容生成+Css Hack
1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...
CSS Hack解决浏览器IE部分属性兼容性问题
1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...
IE9下css hack写法
ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...
【荐】说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...
IE 6 ~ 9 CSS Hack 写法总结
IE 6 ~ 9 CSS Hack 写法总结 24th 四, 14 lip2up [code lang="css"]_color: red; /* ie6 */*color: ...
[转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
聊聊css hack
什么是CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如 ...

随机推荐

mysql 中execute、executeQuery和executeUpdate之间的区别
在用纯JSP做一个页面报警功能的时候习惯性的用executeQuery来执行SQL语句,结果执行update时就遇到问题,语句能执行,但返回结果出现问题,另外还忽略了executeUpdate的返回值 ...
使用ViewPager实现屏幕滑动效果
oncreate中设置viewPager viewPager.setPageTransformer(true,new DepthPageTransformer());//设置页面过滤动画效果 page ...
php变量函数，回调函数
一,变量可以直接传递函数 <?php function demo($num , $n )//$n是个函数 { for($i=0;$i<$num;++$i) { if($n($i)) { e ...
Android--JUnit单元测试
Android--JUnit单元测试前言本篇博客说明一下在Android开发中,如何使用JUnit进行单元测试.首先来了解一下什么是JUnit,JUnit测试是白盒测试,即主要是程序员自己对开 ...
innerHTML，innertext ，textcontent，write（）
innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只 ...
隐藏ArcGIS server设置的用户名
打开注册表编辑器,定位到“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon\ SpecialAccoun ...
在MacOX下安装python－opencv
下载好opencv之后 1. 在文件夹下新建一个release或build的文件夹: 2. cmake . make 3.在该build文件夹下 nano .bash_profile 把python的 ...
RSA非对称加密
先上RSA加密算法的一些简介(截图自轩辕老师的课件): 嗯--RSA就是这么一回事,于是有了如下题目: 1.In an RSA system, the public key of a given us ...
eclipse新建安卓项目点击finish后窗口无法关闭
eclipse新建安卓项目点击finish后窗口不会自动关闭,而且工程会有很多报错: 如图,这个页面点击finish一直无法关闭,后来试了试,才发现是因为新建项目的第一个页面的sdk版本的问题: 这里 ...
详解<a>标签
相信对于学前端的人而言<a>标签并不陌生,我们先把他所有的属性列出来一.主要属性一般来说,a标签有着四种状态,分别是link,hover,active,visited,接下来我会仔细讲 ...

小学了一下css hack

小学了一下css hack的更多相关文章

随机推荐

热门专题