让ie支持css3的一些htc文件
1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)
这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName。
2. Aaron Gustafson的 eCSStender
此方法支持@font-face, CSS3 选择器, 以及 CSS3 Backgrounds 和 Borders。
3. Drew Diller的 DD_roundies
这是一个基于IE VML实现一些CSS3效果的。
4. Remiz Rahnas的border-radius.htc
此方法使用htc文件,配合VML实现,缺点在于不能自动适应目标元素的位置和大小,所以不能适用于动态脚本环境。
5. Nick Fetchak的 ie-css3.htc
关于此方法,我在前面的“让IE6/IE7/IE8浏览器支持CSS3属性”这篇文章中已经做过介绍。
6. Keith Clark的ie-css3.js
这是个与IE7.js类似的项目,其选择器可借助其他JavaScript库,所以其本身较小。
支持的样式及状态说明
| 样式 | 生效 | 无效 |
|---|---|---|
| border-radius | 为元素四个角设置圆角属性 元素边框 |
只设置一个角落的圆角属性 |
| box-shadow | 模糊大小参数 偏移值 |
不支持除了黑色(#000)以外的其他颜色 |
| text-shadow | 模糊大小参数 偏移值 颜色值 |
IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详 |
注意事项:
- 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
- z-index值一定要比周围元素的要高,否则不起作用
7. zoltandulac的cssSandpaper
这是一个使用IE滤镜实现一些CSS3属性的方法。
8. pie.htc
使用CSS的behavior行为,可以调用此文件,然后让IE也能实现一些常见的CSS3效果,如圆角(border-radius),盒阴影(box-shadow),背景渐变(gradient),多图片背景(multiple background images)。
注意事项:
1. z-index相关问题
IE下这些CSS3效果实现是借助于VML,由VML绘制圆角或是投影效果的容器元素,然后这个容器元素作为目标元素的后兄弟节点插入,如果目标元素position:absolute 或是 position:relative,则这个css3-container元素将会设置与之一样的z-index值,在DOM tree中,同级的元素总是后面的覆盖前面的,所以这样就实现了覆盖,又避免了可能有其他元素正好插入其中。
所以,问题来了,如果目前元素的position属性为static,也就是默认属性,则z-index属性是没有用的,无覆盖可言,所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单,设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)。
2. 相当路径的问题
IE浏览器的behavior 属性是相对于HTML文档而言的,与CSS其他的属性不一样,不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方面。如果绝对路径于根目录,则CSS文件不方便移动;如果相对路径与HTML文档,则pie.htc文件在不同HTML页面见的重用性大大降低。同时,诸如border-image后面的URL属性路径也不好处理。
3. 缩写的问题
使用PIE实现IE下的CSS3渲染(其他方法也是一样),只能使用缩写的形式,例如圆角效果,我们可以设置border-top-left-radius表示左上圆角,但是PIE确实不支持这种写法的,只能是老老实实的缩写。
4. 提供正确的Content-Type
要想让IE浏览器支持htc文件,需要一个有着”text/x-component” 字样的content-type 头部,否则,会忽视behavior。绝大数web服务器提供了正确的content-type,但是还有一部分则有问题。
来自:http://www.zhangxinxu.com/wordpress/2010/07/pie%E4%BD%BFie%E6%94%AF%E6%8C%81css3%E5%9C%86%E8%A7%92%E7%9B%92%E9%98%B4%E5%BD%B1%E4%B8%8E%E6%B8%90%E5%8F%98%E6%B8%B2%E6%9F%93/
让ie支持css3的一些htc文件的更多相关文章
- ie-css3.htc 可以让IE低版本浏览器支持CSS3 的一个小工具
ie-css3.htc 先说道说道这斯是弄啥嘞 ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性borde ...
- 让 IE6, 7和 8支持CSS3的HTC文件补丁
让 IE6, 7和 8支持CSS3 IE6,7并不支持CSS3的属性,IE8也不能很好的支持CSS3.但是有一个小脚本能够做到,它可以让IE支持CSS3,包括:border-radius (round ...
- 使用PIE.htc让万恶的IE内核浏览器IE6\7\8支持CSS3部分属性
万恶的IE内核浏览器,这是多少前端程序员头疼的事情... 今天给大家介绍一下如何用 PIE.htc 来让IE浏览器支持CSS3的 border-radius.box-shadow.CSS3 Backg ...
- htc支持CSS3
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 让IE浏览器支持CSS3圆角属性的方法
绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...
- 让IE7 IE8支持CSS3 background-size属性
简介 CSS3 新增的 background-size 是一个很有用的属性,用于定义背景图片的尺寸,有了这个属性,你就可以任意指定背景图片的大小.其中最常用的值应该要数 cover 了,该值能让背景图 ...
- 让IE6IE7IE8支持CSS3属性的8种方法介绍
我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...
- ie支持CSS3标签
让IE6/IE7/IE8浏览器支持CSS3属性 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/w ...
随机推荐
- Atcoder 2373 Cookie Exchanges
Problem Statement Takahashi, Aoki and Snuke love cookies. They have A, B and C cookies, respectively ...
- react 起手式
http://blog.csdn.net/zhouzhiande/article/details/52349344 http://blog.csdn.net/zhouzhiande/article/d ...
- Python机器学习--手写体识别(KNN+MLP)
MLP实现 调整参数比较性能结果 # -*- coding: utf-8 -*- """ Created on Wed Aug 30 21:14:38 2017 @aut ...
- 多线程网页爬虫 python 实现(二)
#!/usr/bin/env python #coding=utf-8 import threading import urllib import re import time cur=0 last= ...
- MergeLinklist
写了一个合并有序链表,代码有点纠结啊.涉及到指针就是麻烦,DS课曹老师课件说linklist是DS的难点. . . 假设数组就非常easy了.链表就要小心. 里面遇到的一些情况.第一.最好是先确定l1 ...
- no matching provisioning profiles found
问题:真机连上,执行这个提示. 解决: 项目->targets->Bulid Settings-> 1,Provisioning Profile->选择配置Bundle Ide ...
- python的pexpect模块
Pexpect 是 Don Libes 的 Expect 语言的一个 Python 实现,是一个用来启动子程序,并使用正则表达式对程序输出做出特定响应,以此实现与其自动交互的 Python 模块. P ...
- 【读后感】Netty 系列之 Netty 高性能之道 - 相比 Mina 怎样 ?
[读后感]Netty 系列之 Netty 高性能之道 - 相比 Mina 怎样 ? 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商 ...
- Golang-interface(二 接口与nil)
github: https://github.com/ZhangzheBJUT/blog/blob/master/nil.md 一 接口与nil 前面解说了go语言中接口的基本用法,以下将说一说nil ...
- javascript常用事件及方法
1.获取鼠标坐标,考虑滚动条拖动 var e = event || window.event; var scrollX = document.documentElement.scrollLeft || ...