Question

我正在开发一些html页面，它也需要在IE8上修复。我使用了不适用于IE8的trasform和border-radious。为此，我使用了'selectivizr.js'，但是，我在IE8上遇到了一些错误，请参见下面的图片。它没有加载。

enter image description here

我的HTML代码是

<!DOCTYPE html>
<html>
 <head>
  <title> Pie </title>
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />

  <link rel="stylesheet" href="opera.css"/>

 <!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr-min.js"></script>
 <![endif]--> 
 </head>
 <body>
<div class="pieContainer">
      <div class="pieBackground"></div>
     <div id="pieSlice1" class="hold"><div class="pie"></div></div>
      <div id="pieSlice2" class="hold"><div class="pie"></div></div>
     <div id="pieSlice3" class="hold"><div class="pie"></div></div>
     <div id="pieSlice4" class="hold"><div class="pie"></div></div> 
     <div class="piecenteric"></div>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
  <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 </body>
</html>

我的css

.pieContainer {
          height: 700px;
     }

     .pieContainercircle {
     border: 2px solid blue;
     padding:10px;
     }

     .pieBackground {
          background-color: grey;
          position: absolute;
           height:350px;
     width:700px;
     border-radius: 700px 700px 0 0;

     -moz-border-radius: 700px 700px 0 0;
          -webkit-border-radius: 700px 700px 0 0;
          -o-border-radius: 700px 700px 0 0;


         /* -moz-border-radius: 350px;
          -webkit-border-radius: 350px;
          -o-border-radius: 350px;
          border-radius: 350px; */
          -moz-box-shadow: -1px 1px 3px #000;
          -webkit-box-shadow: -1px 1px 3px #000;
          -o-box-shadow: -1px 1px 3px #000;
          box-shadow: -1px 1px 3px #000;
     }
     .pie {
          position: absolute;
          width: 700px;
          height: 700px;
          -moz-border-radius: 350px;
          -webkit-border-radius: 350px;
          -o-border-radius: 350px;
          border-radius: 350px;
          clip: rect(0px, 350px, 700px, 0px);
     }
     .hold {
          position: absolute;
          width: 700px;
          height: 700px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 700px, 700px, 350px);
     }

     #pieSlice1 .pie {
          background-color: #1b458b;
          -webkit-transform:rotate(90deg);
          -moz-transform:rotate(90deg);
          -o-transform:rotate(90deg);
          transform:rotate(90deg);
     }
     #pieSlice2 {
          -webkit-transform:rotate(149deg);
          -moz-transform:rotate(149deg);
          -o-transform:rotate(149deg);
          transform:rotate(149deg);
     }
     #pieSlice2 .pie {
          background-color: #ccbb87;
          -webkit-transform:rotate(301deg);
          -moz-transform:rotate(301deg);
          -o-transform:rotate(301deg);
          transform:rotate(301deg);
     }
     #pieSlice3 {
          -webkit-transform:rotate(190deg);
          -moz-transform:rotate(190deg);
          -o-transform:rotate(190deg);
          transform:rotate(190deg);
     }
     #pieSlice3 .pie {
          background-color: #cc0000;
          -webkit-transform:rotate(304deg);
          -moz-transform:rotate(304deg);
          -o-transform:rotate(304deg);
          transform:rotate(304deg);
     }
     #pieSlice4 {
          -webkit-transform:rotate(270deg);
          -moz-transform:rotate(270deg);
          -o-transform:rotate(270deg);
          transform:rotate(270deg);
     }
     #pieSlice4 .pie {
          background-color: #cc00ff;
          -webkit-transform:rotate(323deg);
          -moz-transform:rotate(323deg);
          -o-transform:rotate(323deg);
          transform:rotate(323deg);
     }

    #pieSlice1 div.pieborder {
     border: 5px solid yellow;
     }


     div.piecenteric {
    background-color: white;
    border-radius: 300px 300px 0 0;
    height: 204px;
    margin-left: 151px;
    margin-top: 146px;
    position: absolute;
    width: 398px;
}

以上代码在Firefox和Chrome中运行良好。有什么帮助吗？

selectivizr js不支持IE8

0 个答案: