您的位置：首页 > Web前端 > CSS

IE6&7下使用CSS3（ie-css3.htc的使用）

2013-07-10 19:34 141 查看
css带来的便利是很容易感受的到的，但恶心的是它在ie下的不兼容，所以某位牛人现身写了个ie-css3.htc，允许你在ie下去使用css3的部分东西。

ie-css3的使用方法很简单，在你需要使用css3的样式里加入behavior:url(js/ie-css3.htc);就可以了（括号里是ie-css3.htc的地址）

下面是我对ie-css3.htc的测试。

1、border-radius

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>test</title>
<styletype="text/css">
#box
{
border:#A2BFE0solid5px;
width:100%;
height:500px;
border-radius:10px;
behavior:url(js/ie-css3.htc);
background:#fff;

}

</style>
</head>

<body>
<divid="box">

</div>
</body>
</html>


经过测试，在ie678下都见到了可喜的圆角，但在ie6和ie7下如果没有这句的话

background:#fff;


box的背景会是恐怖的黑色。还好也不是什么大问题。

2、box-shadow

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>test</title>
<styletype="text/css">
#box
{
border:#A2BFE0solid5px;
width:100%;
height:500px;
border-radius:10px;
behavior:url(js/ie-css3.htc);
background:#fff;
box-shadow:10px10px5px#888888;
}

</style>
</head>

<body>
<divid="box">

</div>
</body>
</html>


经过测试后发现，ie6和ie7下的阴影颜色不能控制，是默认的黑色。非常恐怖。

3、text-shadow和word-wrap

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>test</title>
<styletype="text/css">
#box
{
border:#A2BFE0solid5px;
width:100%;
height:500px;
border-radius:10px;
behavior:url(js/ie-css3.htc);
background:#fff;
box-shadow:10px10px5px#888888;
}
h1
{
text-shadow:5px5px5px#FF0000;
behavior:url(js/ie-css3.htc);
}
p.test
{
width:11em;
border:1pxsolid#000000;
word-wrap:break-word;
behavior:url(js/ie-css3.htc);
}
</style>
</head>

<body>
<divid="box">
<h1>文字效果</h1>
<pclass="test">Thisparagraphcontainsaverylongword:thisisaveryveryveryveryveryverylongword.Thelongwordwillbreakandwraptothenextline.</p>
</div>
</body>
</html>


可喜可贺。一切效果正常。但有一点，如果不使用换行，在你写死元素宽度后，内置文字如果太长会溢出，但在ie6下，元素的宽度会与文字适应。


好了，这是对几个css3基本功能的Test，以后继续补充。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航