在不同IE版本下一些小Hack解决方法——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
在不同IE版本下一些小Hack解决方法

发布作者:萧强   发布时间:2015-09-22   阅读次数:7346

条件Hack

语法

<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->

取值

<keywords>

if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本

是否:指定是否IE或IE某个版本。关键字:大于:选择大于指定版本的IE版本。关键字:gt(greater than)大于或等于:选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)小于:选择小于指定版本的IE版本。关键字:lt(less than)小于或等于:选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)非指定版本:选择除指定版本外的所有IE版本。关键字:!<version>

目前的常用IE版本为6.0及以上,推荐酌情忽略低版本,把精力花在为使用高级浏览器的用户提供更好的体验上

IE10及以上版本已将条件注释特性移除,使用时需注意。


用于选择IE浏览器及IE的不同版本下选择不同的样式style

if条件Hack是HTML级别的(包含但不仅是CSS的Hack,可以选择任何HTML代码块)


<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->
大于,示例代码:



<!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->
在上述代码中,只有IE6以上,才能看到应用了test类的元素是红色文本。


大于或等于,示例代码:


<!--[if gte IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->
在上述代码中,只有IE6以上(含IE6),才能看到应用了test类的元素是红色文本。


小于,示例代码:


<!--[if lt IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->
在上述代码中,只有IE7以下,才能看到应用了test类的元素是红色文本。


小于或等于,示例代码:


<!--[if lte IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

在上述代码中,只有IE7以下(含IE7),才能看到应用了test类的元素是红色文本。

非指定版本,示例代码:

<!--[if ! IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->
在上述代码中,除IE7以外的IE版本,都能看到应用了test类的元素是红色文本。


属性级Hack

语法:

selector{<hack>?property:value<hack>?;}
取值:

_:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。*:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高\9:选择IE6+\0:选择IE8+和Opera15以下的浏览器

说明:

选择不同的浏览器及版本

  • 尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
  • 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
  • 一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:

如想同一段文字在IE6,7,8显示为不同颜色,可这样写:

.test {
	color: #090\9; /* For IE8+ */
	*color: #f00;  /* For IE7 and earlier */
	_color: #ff0;  /* For IE6 and earlier */
}
* 上述Hack均需运行在标准模式下,若在怪异模式下运行,这些Hack将会被不同版本的IE相互识别,导致失效。


选择符级Hack

语法

<hack> selector{ sRules }
说明

选择不同的浏览器及版本

  • 尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
  • 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
  • 一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
简单列举几个:

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */
* 上述代码中的3,4两行就是典型的利用能力来进行选择的CSS Hack。


!important

今天在强调一下  !important  的优先级别,这个有时候有很大帮助。

正常情况是间样式>行内样式>外部引入的样式,这样就会出现一个小问题,当你用编辑器编辑文章的时候,所给文字加的样式都是行间样式,这样他的优先级是最高,外部在引入样式是不起作用的,这样我们就可以用 !important 来解决了,

外部的样式+!important就会成为优先级最高的样式了,这样就可以控制并覆盖行间样式了


本文由W3C梦想站整理:http://www.w3cdream.com/content-sort-6-article-477.html

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

css hack解决方案

热点文章

新闻资讯

标签云

友情赞助