IE中的CSS3不完全兼容方案 - PHP开发学习门户
& IE中的CSS3不完全兼容方案
作者 23摄氏度 in , , ,
标签： , ,
到Internet Explorer 8为止，IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影，就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后，就想着用更为简洁、直接有效、CSS3式的办法来解决这些问题。好在就算是饱受批评的Internet Explorer，其本身也是足够强大的。IE特有的技术可以很好的实现一些CSS3的效果。
Opacity透明度
元素的透明度在IE中可以很方便的用滤镜来实现。
background-color:
opacity: .4;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);
border-radius圆角/Box Shadow盒阴影/Text Shadow文字阴影
在IE中可以利用Vector Markup Language (VML)和javascript来实现这些效果，，在引用了一个HTC文件后，在IE浏览器中就可以使用这三种CSS3属性了。
-moz-border-radius: 15 /* Firefox */
-webkit-border-radius: 15 /* Safari 、Chrome */
border-radius: 15 /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */
实际上，在IE中有滤镜来实现阴影(shadow)和投影(drop-shadow)效果的
shadow会产生连续、渐变的阴影
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);
drop-shadow产生的阴影没有明暗变化
filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");
滤镜似乎和现有的htc脚本有冲突，或者可以称之为特性：两者同时在一个元素上启用的时候，滤镜效果会转移到其子元素上
Gradients渐变
IE中提供了一个简单的渐变滤镜
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6+ */
在实现IE中的渐变很简单
RGBA透明度颜色背景
渐变滤镜支持RGBA的颜色，startColorStr和EndColorStr的前两位是Alpha通道值。使用带alpha通道来模拟RGBA颜色背景的同时，应该去掉其background-color属性。
background-color: rgba(0, 255, 0, 0.6); /* FF3+, Saf3+,Opera 10.10+, Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#9900FF00',EndColorStr='#9900FF00'); /* IE6+*/
Multiple Backgrounds多重背景图片
支持CSS3多重背景图片的浏览器中可以用下面的语句来实现背景多重图片：
background: url(bg-image-1.gif) center center no-repeat, url(bg-image-2.gif)
要在IE中实现多背景图片，在需要在单独的IE hack样式表中加入下面的代码：
background: transparent url(bg-image-1.gif)
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg-image-2.gif', sizingMethod='crop'); /* IE6+ */
CSS3浏览器的多重背景
IE的多重背景
Tranformations/rotate旋转元素
IE中有两个滤镜可以实现元素的旋转，BasicImage和Matrix，前者简单方便但是只能做90*n(n∈{1,2,3,4})度的旋转；Matrix滤镜功能强大，但是参数复杂。
-moz-transform: rotate(180deg); /* FF3.5+ */
-o-transform: rotate(180deg); /* Opera 10.5 */
-webkit-transform: rotate(180deg); /* Saf3.1+, Chrome */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-1, M12=-1.3772e-16, M21=1.3772e-16, M22=-1);
旋转也很简单
@font-face服务器端字体
考虑到汉字字体的尺寸，这个CSS3的特性不算实用
font-family:'webFont';
src:url('myfont.eot');/*IE6+*/
src:local('fontname'),/*字体名称*/
url('myfont.woff') format('woff'),/*FF3.6*/
url('myfont.ttf') format('truetype');/*saf3+,chrome,FF3.5,opera10+*/
字体声明并引用了以后，可以在网页的其他地方用font-family使用这一字体。
可以在同一个元素上启用多个滤镜，如：
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=5)progid:DXImageTransform.Microsoft.Alpha(opacity=40);
虽然一些用滤镜模仿CSS3的效果难称完美，但在一些情况下，运用这些技术能够让我们的代码更为简洁和统一
如果您觉得本站的内容对您有所帮助，您可以扫描下面的二维码小额支付请我喝杯茶，感谢！
承诺：凡打赏捐助的朋友，留言备注自己的邮箱，在打赏捐助时间点的6个月内，本站会每周邮件推送原创专业技术博文，供大家学习和参考！
阿里云为例，安装nginx和最新的PHP7.0.10！ 一.安装Nginx 下载并安装nginx # yum install nginx 启动nginx服务 systemctl s...
PHP发布5.6版本后，一直在等，等到了跨越式的PHP7版本，那么问题来了，版本6到哪去了？根据官方的说法，现在的PHP7要比PHP5.6快一倍，有的朋友说快十倍，反正是更快了，本...
为了帮助大家进行线上编程，PHPthinking再度升级我们的在线编程工具。 升级详情： 1.支持在线提交代码 2.支持自定义文件名或默认文件名保存代码 3.支持cookie代码保...
最近，对在线编程很有兴趣，附带的给在线编程添加了一些新的功能，比如通过Cookie实现浏览器关闭后的代码恢复、再比如使用jQuery实现在线编辑的代码及时保存到本地，本文正是向大家...
这个是我在工作中遇到的问题。现在记录之。同时也把我的想法分享给大家。我把一系列的代码弄成了一个js文件，前端只需要调用就可以。源码开放。不过最终还是用的iframe解决的，没有在I...
邮箱（非公开）*
All fields marked (*) are required
PHPthinking致力于成为PHP开发者学习交流平台,从服务器使用，数据模型设计，框架优化，到业务逻辑，页面美化等多方面专业知识分享，为PHP研究做出一份努力。
官网邮箱：
QQ交流群：后使用快捷导航没有帐号？
查看: 2638|回复: 5
小弟才刚刚开始学css，问一下ie和火狐为什么显示不一样，怎么样才能让火狐达到ie中的效果。
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&testA&/title&
&link rel=&stylesheet&&&type=&text/css& href=&css/testA.css& /&
&div id=&all&&
&&&div id=&header&&
& &&div class=&box&&box1&/div&
& &&div class=&box&&box2&/div&
& &&div class=&box&&box3&/div&
&&&div id=&content&&
&&&div id=&footer&&
background-color:#787878;
font-famliy:宋体、微软雅黑;
font-size:14
&&height:768
&&background-color:#d8d8d8;
&&#header {
& &background-color:#780000;
& &height:200
& & margin: 10
& & background-color:
& & height:30
本帖子中包含更多资源
才可以下载或查看，没有帐号？
这是浏览器兼容问题，是因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况
多谢二楼的，可是怎么才能让火狐狸的显示和ie里面相同呢？
就要在网页设计的时候注意一点& & 这个需要具体问题具体对待& & 我看看
把这两个样式修改一下
& &background-color:#780000;
& &height:200
& &padding:10
& & background-color:
& & height:30
& & margin-bottom:10
& && &你仔细看一下这个帖子
这个css有点深奥啊
Powered by Discuz!
& Comsenz Inc.域名与主机是架设一个网站的第一步，也是一个网站的基础，同时选择一个好的域名和主机对于搜索引擎优化（SEO）来说也至关重要。特别是一些商业站点，选择域名与主机更需要注重企业的形象...
签约荷兰EveryNew Fashion公司网站建设，感谢泰康医药的陈总介绍，EveryNew Fashion王小姐是中国人，因此我们有了第一单欧洲的业务，我们将竭尽全力设计好本次网站建设，预祝我们合作顺利...
所谓的浏览器兼容性问题，是指网站设计过程中因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题...
亲，请您联系我们吧
您的疑问，只要您主动联系，将为您得到最专业，最全面的解答，欢迎您询问...
负责人微信：S716717 或手机：
技术直线：7
地址：深圳.龙岗.大运软件小镇19栋3B26-27其他回答(2)
min-width:&
这个属性，定义最小宽度
不过IE6不支持而
外间距和内间距，你可以查看css样式表
&&&您需要以后才能回答，未注册用户请先。