搜索

CSS3 Solutions for IE

05月01日
分类:前端 标签: 评论:[2]

个人一直提倡尽量少用hack，多研究自己的结构，多研究自己的写法，除非一些经典的IE hack。总之是在万不得已的情况下，我个人才会去使用hack这东西！

下午一点半的车，还是抽空去看看一些关注网站的动态,发现一篇关于CSS3 Solutions for Internet Explorer。其实相当一部分是使用IE的filter属性。

ie

Opacity / Transparency

  1. #myElement {
  2. opacity: .4; /* other browsers */
  3. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
  4. -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=40)”; /* this works in IE8 only */
  5. }

Rounded Corners (border-radius)

.Remiz Rahnas 写了一个在IE下的实现圆角的CSS Curved Corner的HTC文件。可以从Google code下载

  1. box-radius {
  2. border-radius: 15px;
  3. behavior: url(border-radius.htc);
  4. }

Box Shadow

  1. .box-shadow {
  2. -moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
  3. -webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
  4. filter: progid:DXImageTransform.Microsoft.Shadow(color=’#969696′, Direction=145, Strength=3);
  5. }

Text Shadow

IE下实现文字阴影由Kilian Valkhof写的一个Jquery plugin

  1. .text-shadow {
  2. text-shadow: #aaa 1px 1px 1px;
  3. }
  1. $(document).ready(function(){
  2. $(“.text-shadow”).textShadow();
  3. });

Gradients

  1. #gradient {
  2. background: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
  3. background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
  4. filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#4477a1′); /* IE6 & IE7 */
  5. -ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#4477a1′)”; /* IE8 */
  6. }

Multiple Backgrounds

  1. #multi-bg {
  2. background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
  3. background: transparent url(images/bg-image-1.gif) top left repeat;
  4. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’images/bg-image-2.gif’, sizingMethod=’crop’); /* IE6-8 */
  5. -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bg-image-2.gif’, sizingMethod=’crop’)”; /* IE8 only */
  6. }

Element Rotation (CSS Tranformations)

  1. #rotate {
  2. -webkit-transform: rotate(180deg);
  3. -moz-transform: rotate(180deg);
  4. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  5. }

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

有2 位同学留下了脚印

  1. 贾宁 2010-06-11

    请问Gradients部分
    FF和IE6、7的颜色值是一样的，为什么显示器显示出来时不一样的？

    回复
    • Jessica 2010-06-12

      background: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
      background: -webkit-gradient(linear,left bottom,left top,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.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#4477a1′)”; /* IE8 */

      try again!

      回复

同学有话要说吗？