实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码) (转)

转载 2007年09月15日 14:41:00
首先解释一下标题的定语:
  • 实例讲解的:文章中会出现可以运行并可立即看到结果的实例代码。
  • 符合中国特色的:中国网民使用最多的浏览器是IE和FireFox。所以这些CssHack主要是为了解决这2种浏览器的兼容问题。中国电脑用户的操作系统主要是Windows,所以这些CssHack主要针对Windows操作系统浏览器,并不包含Mac等。
  • 符合网络现状的:现在网民中最多使用的浏览器是IE6(或者IE6内核的浏览器),其次是IE7(或者IE7内核的浏览器),再次是FireFox。所以这些CssHack主要是为了解决这3种浏览器的兼容问题。
  • 实用的:这些CssHack都是比较简单而且有效的。
多说两句:
  1. 首先应该明确的是:尽量不要使用css hack,因为它的向前兼容是未知的。
  2. 基于现在中国互联网的现状,这里主要对IE6,IE7和FF的最常用且实用的css Hack进行了介绍,但是并不表示css只有这些。(比较完整请访问:CSS hack浏览器兼容一览表
  3. 有些其实已经不是css hack了,而是css的一些新的选择器,例如"#div1>#div2"和"#div1:first-child",对于这样的选择器一般可以放心的使用,因为有较好的向后兼容性。
正文

下面的CssHack在这些浏览器中有效:css hack for FireFoxcss hack for IE7css hack for OP
下面的CssHack在这些浏览器中无效:css hack for IE6
#div1:first-child{
    color
:red;
}

#div1>#div2
{
    font-size
:200%;
}

html[xmlns] #div2
{
    text-decoration
:underline;
}

下面的CssHack在这些浏览器中有效:css hack for IE6css hack for IE7
下面的CssHack在这些浏览器中无效:css hack for FireFoxcss hack for OP
#div2{
    *border
:2px solid red;
}

下面的CssHack在这些浏览器中有效:css hack for IE6
下面的CssHack在这些浏览器中无效:css hack for IE7css hack for FireFox
#div2{
    _width
:100px;
}

* html #div2
{
    height
:100px;
}

下面的CssHack在这些浏览器中有效:css hack for IE7
下面的CssHack在这些浏览器中无效:css hack for IE6css hack for FireFox
*+html #div2{
    background-color
:yellow
}

下面是完整的代码,你可以在不同的浏览器下浏览以便查看效果。
<!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">
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<meta name="Keywords" content="YES!B/S!" />
    
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
    
<title>CSS/Javascript demo</title>
    
<style type="text/css">
        *
{
            font-size
:medium;
            margin
:2px;
            padding
:2px;
        
}
        
/*
        valid    :    FF    IE7 OP8
        invalid    :    IE6
        
*/
        #div1:first-child
{
            color
:red;
        
}
        #div1>#div2
{
            font-size
:200%;
        
}
        html[xmlns] #div2
{
            text-decoration
:underline;
        
}
        
/*
        valid    :    IE6    IE7
        invalid    :    FF    OP8
        
*/
        #div2
{
            *border
:2px solid red;
        
}
        
        
/*
        valid    :    IE6
        invalid    :    FF    IE7
        
*/
        #div2
{
            _width
:100px;
        
}
        * html #div2
{
            height
:100px;
        
}
        
/*
        valid    :    IE7
        invalid    :    FF    IE6
        
*/
        *+html #div2
{
            background-color
:yellow
        
}
        
/*Test Min-height*/
        #div3
{
            border
:1px dotted green;
            width
:100px;
            
/*min-height is valid in FF and IE7.
              it's very important for kill "auto height" problem
*/
            min-height
:100px;
            height
:50px;
        
}
    
</style>
</head>
<body>
<div id="div1">
    
<div id="div2">
     i'm test text.
    
</div>
    
<div id="div3">
        test min-height!
    
</div>
    
<p>
        首先应该明确的是:尽量不要使用css hack,因为它的向前兼容是未知的。
<br/>
        基于现在中国互联网的现状,这里主要对IE6,IE7和FF的最常用且实用的css Hack进行了介绍,但是并不表示css只有这些。
<br/>
        有些其实已经不是css hack了,而是css的一些新的选择器,例如"#div1>#div2"和"#div1:first-child",对于这样的选择器一般可以放心的使用,因为有较好的向后兼容性。
    
</p>
</div>
</body>
</html>
三种浏览器的最终效果图:



keyword:css样式表,css hack,css hack表,css hack firefox,ie css hack,csshack,CSS hack浏览器兼容一览表,CSS Hack汇总快查,css hack下载,ie7csshack,firefoxcsshack,ie6csshack

 

(转)智能投顾的中国特色:强需求,大规模,低门槛与巨大提升空间

智能投顾的中国特色:强需求,大规模,低门槛与巨大提升空间2017-02-20 夏淳淳 鲤财导言 国内的智能投顾平台还有很大的提升空间。当前国内更多的智能平台应定位为“半智能投顾”,这种模式主要依托传...
  • wowotuo
  • wowotuo
  • 2017年03月07日 08:45
  • 312

古香古色之中国特色主题锦集

  • 2009年04月10日 18:53
  • 14.04MB
  • 下载

走有中国特色的工业4.0之路

走有中国特色的工业4.0之路   在2015年3月13日举办的亚信大数据日活动中,来自交大校友之家常务副理事长李正海分享了他对于大数据在工业互联网及工业4.0中的作用,以及走有中国特色工业4.0...

127个口译必备中国特色词汇

  • 2009年12月19日 22:41
  • 42KB
  • 下载

中国特色的CRM部署原则

  • 2013年09月17日 10:40
  • 15KB
  • 下载

艾小葳文摘1-中国特色的牛熊通吃的投资策略及分类

在雪球网上获取艾小葳先生的同意,将先生的一些文字内容转到我的博客中。 原文链接:http://xueqiu.com/7109600443/34960833   针对自己的理解,加入自己的一些想法。...
  • ffm83
  • ffm83
  • 2015年02月05日 09:15
  • 625

中国特色的软件项目流程

  • 2011年12月09日 11:03
  • 2.4MB
  • 下载

中国特色的罚款经济学

中国特色的罚款经济学 李俊 据央视报道,“深圳北环大道是深圳管理最为严格的交通要道,仅8月10日一天,北环大道就查出各类交通违法行为近3000宗,罚款总额近百万元。网友推算,深圳交警仅在北环大道一...
  • aerchi
  • aerchi
  • 2012年09月26日 10:20
  • 2576
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码) (转)
举报原因:
原因补充:

(最多只允许输入30个字)