实例讲解符合中国特色的和网络现状的实用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 FireFox css hack for IE7 css 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 IE6 css hack for IE7
下面的CssHack在这些浏览器中无效:css hack for FireFox css hack for OP
#div2{
    *border
:2px solid red;
}

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

* html #div2
{
    height
:100px;
}

下面的CssHack在这些浏览器中有效:css hack for IE7
下面的CssHack在这些浏览器中无效:css hack for IE6 css 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 夏淳淳 鲤财导言 国内的智能投顾平台还有很大的提升空间。当前国内更多的智能平台应定位为“半智能投顾”,这种模式主要依托传...

关于二叉树,我们的中国特色

国内关于数据结构的教材,不可不提严蔚敏的《数据结构-C语言实现》这本书。想必科班出身的,尤以考研族甚为熟悉。可谓国内权威教材。本人刚考完研,其内容自然是读过不下3遍。其内容非常基础,乃是介绍了数据结构...

中国特色的CRM部署原则

  • 2013-09-17 10:40
  • 15KB
  • 下载

中国特色程序员的「钱途」

今天在微博看到一篇文章,程序员转型书商 年交易额千万元,忍不住想写点儿什么。程序员的「钱途」在那里? 从出版业说起 网络作品排到靠前的,都不会太难看,一般人不爱看某部作品也是因为不喜欢...

中国特色的软件项目流程

  • 2011-12-09 11:03
  • 2.40MB
  • 下载

应用jBPM4解决中国特色的流程需求

jbpm任务freemarker工作模板引擎subprocess 目录(?)[+] 国内人工任务密集型流程的典型特点应用jBPM4解决国内的典型流程需求 用户友好的流程定义工具表...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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