4

区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack

 3 years ago
source link: https://www.zhangxinxu.com/wordpress/2010/04/%e5%8c%ba%e5%88%86ie8ie7ie6%e5%8f%8a%e5%85%b6%e4%bb%96%e6%b5%8f%e8%a7%88%e5%99%a8-css-9hack/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=723

一、前面的唠叨

CSS hack这个东东可以说是老掉牙的东西,我是不会再放到锅里炒的。之所以写这篇文章,更主要的是介绍一个CSS hack – “\9” hack,总之,在我的印象中,这个hack不常用,是适用范围问题,还是确实大家不了解我就不知道了。我最早见到此hack是在新浪博客的CSS文件中,而且这个”\9″ hack可以说犹如泛滥,水漫金山寺般的使用,见下面的截图(chrome查找结果截图):

新浪博客CSS文件

当时并不知道此hack的作用对象,今天偶然又看到此属性,于是简单研究之,发现这是个针对IE浏览器的hack,于是决定写下这篇笔记式的文章,算是一个简单知识点的累积。

二、IE8以及以下版本浏览器

对于IE8及其以下版本的浏览器,就是使用本文标题所提到的”\9″ hack。如下代码:

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE8以及以下版本浏览器*/
}

说明:使用如上所示,在分号之前属性时候添加”\9″就可以了,为什么添加”\9″可以区分目前的IE浏览器和其他浏览器我是不知道的,这里只能使用”\9″,像是”\8″或是”\ie”都是无效的,这个还是比较有趣的。

三、IE7以及以下版本浏览器

这个知道的人应该很多,也是很基本的,就是使用"*"号了,如下示例代码:

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE8以及以下版本浏览器*/
    *color:green; /*IE7及其以下版本浏览器*/
}

四、IE6浏览器

就本文而言,使用下划线"_"区分IE6浏览器是最好的选择,如下代码:

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE8以及以下版本浏览器*/
    *color:green; /*IE7及其以下版本浏览器*/
    _color:purple; /*IE6浏览器*/
}

其他的就不赘述了,您可以狠狠地点击这里:区分IE8/IE7/IE6及其他浏览器demo

此demo在各个浏览器下的表现如下图所示:

Firefox下的截图 张鑫旭-鑫空间-鑫生活

IE6浏览器下截图 张鑫旭-鑫空间-鑫生活

IE7浏览器下截图 张鑫旭-鑫空间-鑫生活

IE8浏览器下的截图 张鑫旭-鑫空间-鑫生活

五、最后的唠叨

在页面中大量使用hack技术的都是CSS技术泛泛之辈,如果您写一个上千行(横排格式)的CSS文件里面没有一个hack,ok,你技术已经不错了。以我的经验,很少很少的情况是不得已使用hack才能解决的。追求页面样式无hack也是提高CSS技能不错方法之一。

欢迎纠错。

(本篇完)1f44d.svg 是不是学到了很多?可以分享到微信
1f44a.svg 有话要说?点击这里


Recommend

  • 23
    • www.tuicool.com 5 years ago
    • Cache

    A Conspiracy to Kill IE61556733668888450

    The bittersweet consequence of YouTube’s incredible growth is that so many stories will be lost underneath all of the layers of new paint. This is why I wanted to tell the story of how, ten years ago, a small team of web...

  • 26
    • blog.chriszacharias.com 5 years ago
    • Cache

    A Conspiracy To Kill IE61556942460664445

    The bittersweet consequence of YouTube’s incredible growth is that so many stories will be lost underneath all of the layers of new paint. This is why I wanted to tell the story of how, ten years ago, a small team of web developers conspired to....

  • 8

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3835

  • 7
    • www.zhangxinxu.com 3 years ago
    • Cache

    IE6下png背景不透明问题的综合拓展

    IE6下png背景不透明问题的综合拓展 这篇文章发布于 2009年08月22日,星期六,00:18,归类于 Web综合。 阅读 274270 次, 今日 165 次...

  • 9
    • www.zhangxinxu.com 3 years ago
    • Cache

    让IE6/IE7/IE8浏览器支持CSS3属性

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=783...

  • 14
    • blogread.cn 3 years ago
    • Cache

    一个IE6下重复加载的BUG

    上周接到一个需求,有人反馈淘宝的搜索结果页会对某些资源文件进行重复不停地重新载入,问题严重。经过一系列排查,最终发现问题所在: IE6在...

  • 7
    • thecodeboss.dev 3 years ago
    • Cache

    What Does It Really Mean to Support IE8?

    What Does It Really Mean to Support IE8? October 30, 2015 Note: This post is geared towards developers who have heard about IE8 being a frustrating browser to support, but are unfamiliar...

  • 7

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=471...

  • 4
    • www.codesd.com 2 years ago
    • Cache

    Different position in IE8 and IE 10

    Different position in IE8 and IE 10 advertisements I have a Problem with the Position of the HTML elements. I am developing a we...

  • 5

    Horizontal overflow of past HTML table in IE8 advertisements I'm building an HTML table that could be at most 5 columns wide and...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK