各位大神,如何让IE7,8兼容background size-size,加滤镜好像不管用

前端在线资源
本文地址:
您可以狠狠地点击这里:,这个玩意儿是让IE浏览器支持CSS3表现的关键东东。
二、上面的是什么东西
首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它。htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。Stop! 别叉远了,点到为止,如果您对htc文件感兴趣,可以参见。
本文的这个ie-css3.htc文件看看名字,看看长相就知道是干嘛的了,让IE浏览器支持CSS3的一些属性。没错,就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为(比较流行的几种)。此htc第一段主要脚本如下:
function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '&v:shape id="vml_flag1" adj="1" />';
var b = a.firstC
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object":
a.parentNode.removeChild(a);
return supportsVml.supported
明白人基本上都知道,这不跟js脚本一个模子里出来的嘛。也就是说,htc只是js脚本去韩国整了个容,换了副马甲而已。
本文作者:张鑫旭,来自张鑫旭-鑫空间-鑫生活(/wordpress/)
本文地址: 访问原出处,更多你未见过的前端技术。
三、如何工作的
要说工作原理,得有一个新角色粉墨登场,那就是“VML”。VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的……关于VML详细知识,您可以点击这里:
如果要我说的话,我觉得就是IE浏览器的御用画笔,专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了,正好可以就此实现一些IE不支持的CSS3效果。
本文作者:张鑫旭,来自张鑫旭-鑫空间-鑫生活(/wordpress/)
本文地址: 访问原出处,更多你未见过的前端技术。
四、如何使用
使用是很容易的,看下面的示例代码:
-moz-border-radius: 15 /* Firefox */
-webkit-border-radius: 15 /* Safari 和 Chrome */
border-radius: 15 /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
可以看到,除了最后添加了behavior这么一句,CSS3属性还是那个CSS3属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。
本文作者:张鑫旭,来自张鑫旭-鑫空间-鑫生活(/wordpress/)
本文地址: 访问原出处,更多你未见过的前端技术。
五、问题和必要的说明
毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:
当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
z-index值一定要比周围元素的要高,否则……只能说抱歉了~~
本文作者:张鑫旭,来自张鑫旭-鑫空间-鑫生活(/wordpress/)
本文地址: 访问原出处,更多你未见过的前端技术。
六、支持的样式及状态说明
参见下表:
border-radius
为元素四个角设置圆角属性 元素边框
只设置一个角落的圆角属性
box-shadow
模糊大小参数偏移值
不支持除了黑色(#000)以外的其他颜色
text-shadow
模糊大小参数偏移值颜色值
IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详
本文作者:张鑫旭,来自张鑫旭-鑫空间-鑫生活(/wordpress/)
本文地址: 访问原出处,更多你未见过的前端技术。
七、实例与演示
我自己做了个demo页面,实现的效果是CSS3的圆角以及投影效果,您可以狠狠地点击这里:
以下为IE6浏览器下的效果截图:
此htc文件是老外写的,所以要是遇到不知名的问题,可以向我询问,但是我不能保证可以给出一个满意的答复。就这些,祝您好运。
原创文章,转载请注明来自[]
本文地址:
(本篇完)
相关文章 (0.582) (0.504) (0.504) (0.418) (0.404) (0.404) (0.359) (0.345) (0.345) (0.345) (RANDOM - 0.064)
标签: , , , , , , , , ,
赞助商推荐():
想学到点真东西?
如果你有1~3年前端开发经验,不妨
热门总排行ie7,ie8背景图片background-size无效问题 - CSDN博客
ie7,ie8背景图片background-size无效问题
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&让IE7 IE8支持CSS3 background-size属性演示_dowebok&/title&
height: 100%;
height: 100%;
margin: 0;
background: url(images/126.jpg) center no-repeat;
background-size: cover;
-ms-behavior: url(css/backgroundsize.min.htc);
behavior: url(css/backgroundsize.min.htc);
&!-- 以下是统计等信息,与演示无关,不必理会 --&
.vad { position: absolute; left: 0;
top: 45%; width: 100%; font-family: Consolas,arial,宋体; text-align: center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 60px solid transparent;}
&p class=&vad&&
&a href=&/& target=&_blank&&返回首页&/a&
&a href=&/139.html& target=&_blank&&说明&/a&
&a href=&/139.html& target=&_blank&&下载&/a&
&div style=&display: none;&&&!--#include file=&/inc/tongji.inc&--&&/div&
网上搜索 backgroundsize.min.htc 文件即可
本文已收录于以下专栏:
相关文章推荐
在IE7下面定义了一个div,没有定义height,用padding撑开,结果看不到背景图片。
解决方法:给div随便定义一个height。
做的项目我一般在chrome下测试,做完之后在IE8上测试发现背景图片不显示,代码如下:
background:url(/webpage/jx/images/bg.png)repeat-x;
很多flash站都用到了一张背景图,然后根据浏览器大小自动缩放,但图片不变形。
在CSS3中,有属性:
background-size:  //只支持IE9+
-webkit-ba...
在ie9及以上我们使用
-moz-background-size:70%;
-webkit-background-size:70%;
-o-background-size:70%;
  background:url('image/xdbg.jpg');
filter:progid:DXImageTransform.Microsoft.AlphaImageLoade...
问题:background-size:cover
IE8 不支持
解决:使用img作为背景图,用z-index来控制层级HTML:
遇到的问题是 :有一个div ,div用绿色框体现。然后通过js控制框的大小,实现动态的改变div的大小。 (放大缩小窗口,div跟随变大变小。)
设置了div的css属性  backgroun...
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?
1、link语法结构
实际应用截图:
使用link标签截图
Html link标签说明
此标签是引入CSS文件link标签,只要设置好路径即可。
扩展阅读:html link
1,首先判断浏览器是否支持placeholder属性,如果不支持则使用模拟placeholder  //判断是否支持placeholder属性  function isPlaceholer(){  v...
他的最新文章
讲师:宋宝华
讲师:何宇健
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)后使用快捷导航没有帐号?
只需一步,快速开始
查看: 11888|回复: 6
怎么在IE上兼容background-size
UID565061在线时间 小时积分490帖子离线17476 天注册时间
中级会员, 积分 490, 距离下一级还需 10 积分
在IE浏览器上遇到HTML5+css3这块都会有很多问题,目前我就遇到一个,在IE7以上遇到background-size不能够兼容的。好烦!各位大神帮个忙吧
UID657579在线时间 小时积分3057帖子离线17476 天注册时间
金牌会员, 积分 3057, 距离下一级还需 1943 积分
这个没有,基本上说起h5+3都不考虑低版本IE,要兼容这个只能不用
UID657579在线时间 小时积分3057帖子离线17476 天注册时间
金牌会员, 积分 3057, 距离下一级还需 1943 积分
但是如果非得有,可以使用图片层次定位模拟一个
UID494384在线时间 小时积分8062帖子离线17476 天注册时间
可以试试 IE 的滤镜:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='*****.gif',
sizingMethod='scale');
-ms-filter: &progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='*****.gif',
sizingMethod='scale')&;复制代码
UID565061在线时间 小时积分490帖子离线17476 天注册时间
中级会员, 积分 490, 距离下一级还需 10 积分
可以试试 IE 的滤镜:
3Q!办法很好~!
UID565061在线时间 小时积分490帖子离线17476 天注册时间
中级会员, 积分 490, 距离下一级还需 10 积分
可以试试 IE 的滤镜:
O(∩_∩)O谢谢
UID494384在线时间 小时积分8062帖子离线17476 天注册时间
8客气DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
Powered byIE8下如何设置背景图片尺寸?background-size属性ie8不支持。_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
IE8下如何设置背景图片尺寸?background-size属性ie8不支持。
我有更好的答案
目前我的解决方法是用img.设置img绝对定位。设置z-index放置到内容的后面。
为您推荐:
其他类似问题
background的相关知识
等待您来回答}

我要回帖

更多关于 background size兼容 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信