欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

IE6&7下使用CSS3（ie-css3.htc的使用及加强版）有大用 但为什么我这边 ie 不行

shiping1 的头像
星期一, 2015-05-04 14:41 — shiping1

IE6&7下使用CSS3（ie-css3.htc的使用及加强版）

发表于2014 年 02 月 18 日由李惟
 

做前端的同学都应该听说或者用过，是一段脚本，可以让ie实现css3里的圆角和阴影效果。

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

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

ie-css3.htc    

自己已下载 见 ie-css3.htc.zip

http://fetchak.com/ie-css3/

用法大致如下：/*加背景颜色  不用边框也可以*/

1
2
3
4
5
6
7
8
9
10
11
.box {
border:2px solid;
 
    -moz-border-radius: 15px;                /* Firefox */
    -webkit-border-radius: 15px;             /* Safari and Chrome */
    border-radius: 15px;                     /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
 
    -moz-box-shadow: 10px 10px 20px #000;    /* Firefox */
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
    box-shadow: 10px 10px 20px #000;         /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
 
    behavior: url(ie-css3.htc);              /* This lets IE know to call the script on all elements which get the 'box' class */
}

ie-css3.htc 加强版

最近用到了这个东西，发现动态改变div的内容之后，这段脚本生成的vml会出现变形。。
所以加了一个手动刷新的函数，通过innerHTML赋值之后调用一下就可以了

1
2
el.innerHTML = '....';
if(window.update_css3_fix) update_css3_fix(el);

如果使用jquery就不用这么麻烦，在你的框架里加一段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function()
{
    if (!jQuery.browser.msie) return;
    jQuery.fn.__ohtml__ = jQuery.fn.html;
    jQuery.fn.html = function(value)
    {
        jQuery(this).__ohtml__(value);
        this.each(function()
        {
            update_css3_fix(this);
        });
        return this;
    };
})();

另外官网下载的脚本还会产生yourdomain/none的404请求，也已经修复

下载增强版ie-css3.htc   自己已下载 见 ie-css3.htc.zip

http://files.cnblogs.com/aiyuchen/ie-css3.htc.zip

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

经过测试，在ie678下：

  • 都见到了可喜的圆角

  • 阴影颜色不能控制，是默认的黑色

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

最后，有什么问题，大家可以给我留言哦，别忘了关注我的博客哦：

http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0

来自 http://levi.cg.am/archives/3341



下面是例子 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
 
#box_1 {
    border: #A2BFE0 solid 5px;
    width: 100%;
    height: 500px;
    border-radius: 10px;
    background: #fff;
    
}
 
#box_2 {
    border:#A2BFE0 solid 5px;
    width:100%;
    height:500px;
    border-radius:10px;
    background:#fff;
    box-shadow: 10px 10px 5px #888888;
}
#box_3 {
    border: #A2BFE0 solid 5px;
    width: 100%;
    height: 500px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 10px 10px 5px #888888;
}
 
#box_3 h1 {
    text-shadow: 5px 5px 5px #FF0000;
}
 
p.test {
    width:11em; 
    border:1px solid #000000;
    word-wrap:break-word;
}
</style>
</head>
 
<body>
<h2>border-radius</h2>
<div id="box_1"></div>
 
<h2>box-shadow</h2>
<div id="box_2"></div>
 
<h2>text-shadow 和 word-wrap</h2>
<div id="box_3">
    <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>



让IE浏览器支持CSS3圆角属性的方法

添加评论2010年12月18日 iefans

如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。今天我们主要是讲解如果用CSS3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS3的解析，只有还不太主流的IE9支持CSS3和HTML5的标准。让IE支持CSS3的解析方法有很多种，（让IE浏览器支持HTML5标准的方法）下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角：

1、下载一个压缩包，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的HTML文件：iecss3.rar；.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。

解压后，打开test.html，如果显示效果是圆角，则可以继续。

使用演示：

.main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:2;
behavior: url(此处为ie-css3.htc文件的绝对路径);
}

Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性（10px是圆角半径），可以直接解析出圆角；Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角；IE系浏览器则需要加上“border-radius: 15px;”的属性。

注意：

1、behavior的url里一定要填写ie-css3.htc的绝对路径，因为 IE浏览器找该文件是相对当前html文件路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

2、一定要有定位属性：position:relative;

3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。

4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px; height:400px;”属性。

5、radius属性的10px是圆角半径，还可以给两个值如“border-radius: 10px 5px;”，这样则左上角与右下角半径为10px，右上角与左下角半径为5px。也可以赋4个值，为“上  右  下  左”。

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
文章引用地址：http://www.iefans.net/ie-css3-yuanjia/ 作者：iefans

来自 http://www.iefans.net/ie-css3-yuanjia/


S3圆角圆边样式，支持各大版本浏览器，包括支持IE6-IE9浏览器的圆边圆角。

本文我们主要是讲解如果用CSS 3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS3的解析，只有还不太主流的IE 9支持CSS 3和HTML 5的标准。让IE支持CSS 3的解析方法有很多种，下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角。

在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器。

具体CSS代码：



  1. .yuan { 
  2. border: 2px solid #C0C0C0; 
  3. -moz-border-radius: 10px; 
  4. -webkit-border-radius: 10px; 
  5. border-radius: 10px; 
  6. position:relative; 
  7. padding:5px; 
  8. background:#FFF; 
  9. z-index:2; 
  10. width:330px; 
  11. height:200px; 
  12. behavior: url(iecss3.htc) 
  13. } 
在CSS中使用behavior引入“iecss3.htc”插件文件即可。DIVCSS5提示注意，要让IE6-IE8支持，需要将“behavior: url(iecss3.htc)”引人CSS代码直接放到HTML文件源代码内才能生效。
让IE6-IE8支持CSS3圆角必备条件：
1、behavior: url(iecss3.htc)必须直接HTML中引人;
2、position:relative; z-index:2; 必须同时使用position和z-index两个CSS属性。
iecss3下载 （3.576KB）
html应用代码：


  1. <div class="yuan"> 
  2. DIVCSS5圆角实例<br> 
  3. CSS3版本圆角实例，<br> 
  4. 支持低版本IE6-IE9浏览器 
  5. </div> 
圆角效果截图
圆角CSS样式实现截图
CSS3版支持各大浏览器圆角效果截图
在线浏览：查看案例
整个源文件打包下载：
立即下载 （4.580KB）
相关推荐特效：纯DIV CSS圆角

 

 
附件大小 


 
Package icon ie-css3.htc.zip3.81 KB 





普通分类: 
div+css
  


  

          
  • 


    
      




  



  

          

                      

    


    
  

    Powered by Drupal  






    
友情链接

  
  

    
校园好文网

  






    
  

    
 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2