Question

我在一个网站的帮助下做了一个非常好看的效果，该网站适用于每个探险家期望的IE8-7等。我研究并发现现代化器可以帮助但是没有让它工作......这是代码......

<!DOCTYPE HTML>

<html>

<head>
<script type="text/javascript" src="modernizr.custom.13486.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">.
<title>Amazing CSS3 Image Hover Over Boxes, Using Transitions.</title>

<link rel="stylesheet" type="text/css" href="square.css">
</head>
<body>

 <div id="center">

 <ul class="custom-menu"> 
<li>    
    <a href="#">
        <div class="content"> 
        <h2 class="link">Nivel Basico</h2>
        <h3 class="secondary">Aprenderás</h3> 
        <p class="info"><img src="images/Flaticon_43130(1).png"  /></p>
        <p class="icon" >Es capaz de comprender y utilizar expresiones cotidianas de uso muy frecuente, así como frases sencillas destinadas a satisfacer necesidades de tipo inmediato. Puede presentarse a si mismo y a otros, pedir  y dar información persona básica sobre su domicilio, sus pertenencias y las personas que conoce, Puede relacionarse de forma elemental siempre que su interlocutor hable despacio y con claridad y esté dispuesto a cooperar. </p>
        </div>
    </a> 
</li> 


  <li class="custom-menu1"> 
    <a href="#">
         <div class="content"> 
         <h2 class="link">Nivel Intermedio</h2>
         <h3 class="secondary">Aprenderás</h3> 
         <p class="info"><img src="images/Flaticon_43075.png" /></p>
<p class="icon"> Es capaz de comprender los puntos principales      de     textos  claros y en la lengua estándar si tratan sobre  cuestiones que le son   conocidas ya sea en situaciones de trabajo de estudio o de ocio, sabe desenvolverse en la mayor parte de las situaciones que pueden surgir durante un viaje por zonas donde se utiliza la lengua. Es capaz de producir textos sencillos y coherentes sobre temas que le son familiares o en lo que tiene un interés persona.</p>
        </div>
      </a> 
    </li> 



   <li class="custom-menu2">    
    <a href="#">
        <div class="content"> 
        <h2 class="link">Nivel Avanzado</h2>
        <h3 class="secondary">Aprenderás</h3>
        <p class="info"><img src="images/Flaticon_47028.png" /></p> 
        <p class="icon" > Es capaz de comprender con facilidad       prácticamente todo lo que oye o lee. Sabe reconstruir la información y los argumentos procedentes de diversas fuentes, ya sean en lengua hablada o escrita, y presentarlos de manera coherente y resumida.
Puede expresarse espontáneamente, con gran fluidez y con un grado de precisión que le permite diferenciar pequeños matices de significado incluso en situaciones de mayor complejidad.</p>          
        </div>
      </a> 
</li> 
 </ul> 
</div>

</body>
</html>

这是CSS

#center { 

   margin:  0px 0px 0px 0px;  

}


.custom-menu {
   margin:  0px 0px 0px 0px;  
   height: 400px; 
   width: 86%;
}   

.custom-menu ul {margin: 0 0 0 -4px;}

.custom-menu li { 
   width: 250px;
   height: 300px;
   overflow: hidden;
   position: relative;
   float: left;
   background: #fff;
   margin: 0px 0px 0px 0px; 
   border: 2px solid #e3e3e3;
   border-radius: 1px; 
   transition: 500ms; 
   -webkit-transition: 500ms; /* Safari & Chrome */
   -o-transition: 500ms; /* Opera */ 
   -moz-transition: 500ms; /* Old firefox */

 } 

.custom-menu li a { 
   text-align: center; 
   text-decoration: none; 
   border-style: none; 
} 


.custom-menu li:hover {
   border: 3px solid #29abe2;
   background-color: #014B67;
} 


 .content { 
    margin-top: 12px; 
 } 

 .link { 
    font-size: 23px; 
    margin-top: 10px;
    color: #29ABE2;   
    transition: 500ms; 
   -webkit-transition: 500ms;  /* Safari & Chrome */
   -o-transition: 500ms;   /* Opera */ 
   -moz-transition: 500ms;  /* Old firefox */
}

.custom-menu li:hover .link {
   color: #fff; 
   font-size: 18px; 
}

.secondary { 
   margin-top:-75px;
   color: #fff; 
   transition: 500ms;
   -webkit-transition: 500ms; /* Safari & Chrome */
   -o-transition: 500ms; /* Opera */ 
   -moz-transition: 500ms; /* Old firefox */
} 


.custom-menu li:hover .secondary { 
   background-color: #29abe2; 
   height: -70px; 
   padding-top: 4px; 
 } 

.info { 
   font-size: 18px; 
   color: #014B67;
   margin-top: 59px;  
   padding: 18px; 
   transition: 500ms;
   -webkit-transition: 500ms; /* Safari & Chrome */ 
   -o-transition: 500ms; /* Opera */ 
   -moz-transition: 500ms; /* Old Firefox */
} 

.custom-menu li:hover .info {
   transform: translateX(-400px) rotate(360deg); 
   -webkit-transform: translateX(-400px) rotate(360deg); /* Safari & Chrome */
   -o-transform: translateX(-400px) rotate(360deg);  /* Opera */
   -moz-transition: translateX(-400px) rotate(360deg);  /* Old Firefox */ 
}

.icon { 
   transition: 500ms; 
   -webkit-transition: 500ms; /* Safari & Chrome */  
   -o-transition: 500ms; /* Opera */ 
   -moz-transition: 500ms; /* Old Firefox */ 
   transform: translate(-300px) rotate(360deg);
   -webkit-transform: translate(-300px) rotate(360deg); /* Safari & Chrome */ 
   -o-transform: translate(-300px) rotate(360deg); /* Opera */ 
   -moz-transform: translate(-300px) rotate(360deg); /* Old Firefox */ 
} 

.custom-menu li:hover .icon { 
   font-size: 14px;
   font-family: Arial;
   color:white;
   text-align:justify;
   margin: 4px 4px 4px 4px;
   transform: translateY(-115px) rotate(0deg); 
   -webkit-transform: translateY(-115px) rotate(0deg); /* Safari & Chrome */ 
   -o-transform: translateY(-115px) rotate(0deg); /* Opera */
   -moz-transform: translateY(-206px) rotate(0deg); /* Old Firefox */ 
} 

/* Colors */ 
li.custom-menu1:hover { 
background-color: #009878;
}
li.custom-menu2:hover { 
background-color: #B0232A;
} 
li.custom-menu3:hover {

}

所以..它现在应该在IE8上运行，对吧？或者我在这里遗漏了什么？

Answer 1

您需要在rotate

中使用DXImageTransform.Microsoft到translate或IE

egs ，

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

并且

-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //for IE8

请查看css-rotate-in-ie以获取更多信息。

CSS3效果无法在IE8上运行

1 个答案: