仓酷云

标题: 来谈谈：CSS3实例教程:IE不撑持CSS3效果的特别处置 [打印本页]

作者: 精灵巫婆 时间: 2015-1-15 22:58
标题: 来谈谈：CSS3实例教程:IE不撑持CSS3效果的特别处置
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
破洛洛文章简介：通明度属性是CSS中十分经常使用和盛行的一个属性，今朝已普遍被次要扫瞄器撑持，惋惜的是IE6/7/8均不撑持该属性。固然IE没有撑持这个CSS属性，可是我们能够经由过程利用IE独有的滤镜filter属性来完成不异效果。
Opacity通明度通明度属性是CSS中十分经常使用和盛行的一个属性，今朝已普遍被次要扫瞄器撑持，惋惜的是IE6/7/8均不撑持该属性。固然IE没有撑持这个CSS属性，可是我们能够经由过程利用IE独有的滤镜filter属性来完成不异效果。

清单1.Opacity代码示例

opacity:0.4;/*Chrome、Safari、Firefox、Opera*/filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);/*IE6/IE7/8*/-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";/*IE8*/

复制代码

如下面代码所示，第一行是在其他扫瞄器中利用Opacity属性；第二行是IE6/7/8中利用滤镜属性设置通明度；第三行是新的IE滤镜属性，它只在IE8中起感化在其他扫瞄器中会被疏忽，假如不是针对IE8设置，利用第二行代码就能够了。参数的设置与CSS中Opacity属性也基础不异，在IE滤镜中利用0-100暗示通明度，因而opacity=40相称于Opacity属性为0.4，亦即通明度为40%。利用该滤镜属性有两个弱点：因为利用了Microsoft独有的属性，会使得你的CSS非考证的；别的，IE的滤镜属性会使得一切的HTML子节点都承继这个属性。

.IE扫瞄器中通明度演示

Border-Radius圆角效果
圆角效果是CSS3中另外一个十分经常使用和盛行的效果。它使得程序员不再必要吃力的拼装良多圆角图片大概利用大批庞大的JavaScript来完成的不异的效果。在很年夜水平上圆角属性简化了HTML代码布局，同时优化了显现效果。但是IE全系列扫瞄器仍然不撑持这个属性。侥幸的是RemizRahnas利用VML编写了一个HTC文件，为IE扫瞄器供应圆角效果的撑持。

清单2.圆角代码示例

-moz-border-radius:15px;/*Firefox*/-webkit-border-radius:15px;/*Safari、Chrome*/border-radius:15px;/*Opera10.5+、IE6+*/behavior:url(ie-css3.htc);/*挪用剧本增加圆角效果*/

复制代码

如下面代码所示，圆角属性的利用和CSS圆角属性分歧，只是在前面多增加了一句behavior:url(ie-css3.htc)。behavior属性只被IE扫瞄器撑持和辨认，用来告知IE在哪些设置了该款式Class的元素上挪用剧本增加圆角效果。一句简便的代码就使得IE撑持圆角效果，而不必要你分外的保护任何代码。但是这类折衷的办法也有一些缺点：起首，在Server端必要引进一个HTC文件，经由gzip紧缩后对server端和client端功能应当不会有太年夜的影响；其次，它会使你的CSS考证分歧法；别的，这个剧本在IE8上有一些成绩，它会使z-index值酿成正数。因而利用时还必要当心。

.IE扫瞄器中圆角效果演示

BoxShadow盒暗影
盒暗影是另外一个CSS3中的很有效的属性，它使得程序员能够经由过程复杂的增加一个属性，就创立出一个平面效果带有暗影的元素。在IE全系列扫瞄器中仍然在不撑持这个属性，但IE为这个效果供应了滤镜属性；别的和下面圆角效果一样，我们能够经由过程VML剧本来完成这个效果。

清单3.BoxShadow的滤镜完成代码

-moz-box-shadow:2px2px3px#969696;/*Firefox3.5+*/-webkit-box-shadow:2px2px3px#969696;/*SafariandChrome*/filter:progid:DXImageTransform.Microsoft.Shadow(color=#969696,Direction=145,Strength=3);

复制代码

清单4.BoxShadow的VML剧本完成

-moz-box-shadow:2px2px3px#969696;/*Firefox*/-webkit-box-shadow:2px2px3px#969696;/*SafariandChrome*/box-shadow:2px2px3px#969696;/*Opera10.5+、IE6+*/behavior:url(ie-css3.htc);/*挪用剧本增加暗影效果*/

复制代码

如下面代码所示，下面两种办法都可完成这个效果。可是要注重的是，IE滤镜效果语法与其他扫瞄器中CSS3属性语法分歧。因而必要开辟职员细心调试使得在分歧扫瞄器中看起来有不异的效果。

.IE扫瞄器中盒暗影效果演示

TextShadow
笔墨暗影在不但盛行于打印效果中，同时也在Web计划中也十分盛行。但是关于TextShadow这个属性我们就没有那末好命运了，IE没有供应响应的滤镜效果，也没有现成的VML剧本可使用。在已往的Web开辟中，我们一般利用图片来完成笔墨暗影效果。KilianValkhof为懂得决IE下完成笔墨暗影这个困难，而编写了一个jQuery的插件。

清单5.IE扫瞄器中完成TextShadow效果代码

text-shadow:#aaa5px5px8px;$(document).ready(function(){$(".text-shadow").textShadow();});

复制代码

如下面代码所示，下载了jQuery中心包和DropShadow插件后我们就能够在IE中利用笔墨暗影效果了。textShadow()办法还能够填进一个JavaScript工具参数，以下表所示：

表1.textShadow属性参数表
属性名范例默许值形貌left整型4暗影间隔top整型4暗影角度blur整型2暗影分散度opacity0-1小数0.5暗影通明度color色彩值black字体暗影色彩swap布尔false是不是换行

.TextShadow演示图

Gradients突变色
CSS3中的突变色为突变背景致供应了很年夜的便利，我们不用为了突变的背景致利用大批微小的图片，同时也不必为了顺应扫瞄器分辩率做良多事情。只管IE扫瞄器仍是不撑持该属性，我们仍然能够经由过程IE是由的滤镜属性完成该效果。

清单6.IE扫瞄器中完成突变色

background-image:-moz-linear-gradient(top,#81a8cb,#4477a1);/*Firefox3.6*/background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#4477a1),color-stop(1,#81a8cb));/*Safari&Chrome*/filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#81a8cb,endColorstr=#4477a1);/*IE6&IE7*/-ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType=0,startColorstr=#81a8cb,endColorstr=#4477a1)";/*IE8*/

复制代码

如下面代码所示，我们可使用IE的公有的滤镜来完成该效果。个中GradientType能够有两个选项值0和1，分离代表程度突变和垂直突变。startColorstr和endColorstr分离代表突变入手下手的色彩值和停止的色彩值。固然参数和功效不如CSS3中的突变多，可是对已一样平常的需求来讲也算够用了。别的该滤镜属性在IE6/7和IE8中撑持的语法不不异，因而我们必要写分歧的代码往做IE6/7和IE8的兼容处置。

.IE扫瞄器突变色演示

RGBA色彩
CSS3中供应了另外一种体例设置背景通明度，那就是RGBA色彩。RGBA色彩使得开辟职员在指定色彩时，不但能够指定R、G、B三原色的值，同时还能够指定色彩的通明度。如许我们就就能够在扫瞄器中完成相似Windows7中一样通明的玻璃效果，这年夜年夜加强了Web程序的视觉感官体验。在IE全系列扫瞄器中仍然不撑持RGBA色彩，我们只能使用IE滤镜摹拟完成如许的效果。

清单7.IE扫瞄器RGBA色彩完成代码

background:rgba(50,95,224,.4);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#886287a7,endColorstr=#886287a7);

复制代码

如下面代码所示，使用IE中突变色滤镜将突变入手下手色彩和停止色彩设置不异，能摹拟出和其他扫瞄器非常相似的RGBA色彩效果。别的为了在IE中取得较好的通明背景效果，利用PNG图片作为背景图片也是一个很不错的选择。不外如许做的弱点是你不能不处置大批的图片，同时为了顺应图片背景不能不修正HTML的布局。

.IE扫瞄器中滤镜完成RGBA色彩效果

Rotation扭转
在最新的Firefox和Webkit扫瞄器中都对CSS3形变和动画效果做了分歧水平的撑持。你能够扭转、拉伸、平移一个HTML元从来完成之前只能用图片完成的平面效果，也能够利用CSS属性来完成壮丽的淡进、淡出等动画效果。今朝IE全系列扫瞄器还不撑持该属性，可是很少有人晓得利用IE的滤镜能够完成复杂的HTML元素扭转的效果。

清单8.IE扫瞄器中完成扭转

-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

复制代码

如下面代码所示，最初一行代码在IE中完成扭转效果。个中的参数rotation的选项为1、2、3和四，分离代表扭转90度、180度、270度和360度。和CSS3中的扭转360度功效比拟，IE中的扭转滤镜功效就显得非常无限了，每次90度的扭转很难满意开辟职员的需求。
别的dojo在1.5版本对CSS3中的transform属性入手下手有必定的撑持，个中包含了matrix、rotate、skew、scale、translate等功效。假如有CSS3形变需求的话，能够参考利用dojo对这部分功效的扩大。

清单9.利用dojo设置HTML元素扭转

dojox.html.ext-dojo.style("transform","rotate(10deg)");

复制代码

.IE扫瞄器中滤镜完成HTML元素扭转
[attach]291996[/attach]
小结
CSS3固然还没有正式公布，可是各个扫瞄器厂商已入手下手部分撑持这些新特征了。这些新特征的撑持给我来带了良多欣喜，使我们很简单完成我们意想不到的华美的效果，简化了良多前端完成的代码。可是CSS3也给我们带来了良多困扰，各个扫瞄器厂商对CSS3尺度撑持纷歧致，特别是挺拔独行的IE给开辟职员带来更多的贫苦。为了完成Web程序的跨扫瞄器和显现的分歧性，我们不能不消费良多工夫在各个扫瞄器差别的调试上。本文针对部分IE不撑持的CSS3效果和在IE扫瞄器上的替换计划做了具体的先容。但愿能为宽大开辟者在将来的开辟事情中供应一点启发。
</p>
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。

作者: 不帅 时间: 2015-1-17 20:02
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 分手快乐 时间: 2015-1-24 15:24
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 若相依 时间: 2015-2-1 23:53
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 小女巫 时间: 2015-2-7 18:01
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 只想知道 时间: 2015-2-22 22:43
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 莫相离 时间: 2015-3-7 06:09
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 愤怒的大鸟 时间: 2015-3-14 15:31
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 兰色精灵 时间: 2015-3-21 13:09
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

欢迎光临仓酷云 (http://ckuyun.com/)