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

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

<!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" />
<title>test</title>
<style type="text/css">
#box
{
    border:#A2BFE0 solid 5px;
    width:100%;
    height:500px;
    border-radius:10px;
    behavior: url(js/ie-css3.htc);
    background:#fff;
    
}


</style>
</head>

<body>
    <div id="box">
        
        </div>
</body>
</html>

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

background:#fff;

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

2、box-shadow

<!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" />
<title>test</title>
<style type="text/css">
#box
{
    border:#A2BFE0 solid 5px;
    width:100%;
    height:500px;
    border-radius:10px;
    behavior: url(js/ie-css3.htc);
    background:#fff;
    box-shadow: 10px 10px 5px #888888;
}

</style>
</head>

<body>
    <div id="box">
        
    </div>
</body>
</html>

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

3、text-shadow 和 word-wrap

<!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" />
<title>test</title>
<style type="text/css">
#box
{
    border:#A2BFE0 solid 5px;
    width:100%;
    height:500px;
    border-radius:10px;
    behavior: url(js/ie-css3.htc);
    background:#fff;
    box-shadow: 10px 10px 5px #888888;
}
h1
{
    text-shadow: 5px 5px 5px #FF0000;
    behavior: url(js/ie-css3.htc);
}
p.test
{
    width:11em; 
    border:1px solid #000000;
    word-wrap:break-word;
    behavior: url(js/ie-css3.htc);
}
</style>
</head>

<body>
    <div id="box">
        <h1>文字效果</h1>
        <p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
    </div>
</body>
</html>

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

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

posted on 2013-07-10 19:34 潇逸丶阅读(1402) 评论(0) 收藏举报