Internet Exporer 9 против Internet Explorer 11

Я новичок в IE 11, и у меня проблема с кодом, который отлично работает в IE 9, но при просмотре в IE 11 он имеет совершенно другой эффект. В IE 9 этот код ниже отображает текст по умолчанию и функция наведения на работоспособность работает нормально. В IE 11 текст отображается только при наведении курсора, и он почти похож на анимированный эффект, натягиваемый над изображением при наведении. Может ли кто-нибудь дать понять, почему поведение отличается?Internet Exporer 9 против Internet Explorer 11

<!DOCTYPE HTML> 

<head> 

    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 

    <title>test</title> 

<style type="text/css"> 

/* generic css */ 
.view { 
    margin: 10px; 
    float: left; 
    border: 10px solid #fff; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    box-shadow: 1px 1px 2px #e6e6e6; 
    cursor: default; 
    background: #fff no-repeat center center 
} 
.view .mask, .view .content { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0 
} 
.view img { 
    display: block; 
    position: relative 
} 
.view h2 { 
    text-transform: uppercase; 
    color: #fff; 
    text-align: center; 
    position: relative; 
    font-size: 17px; 
    font-family: Raleway, serif; 
    padding: 10px; 
    background: rgba(0, 0, 0, 0.8); 
    margin: 20px 0 0 0 
} 
.view p { 
    font-family: Merriweather, serif; 
    font-style: italic; 
    font-size: 14px; 
    position: relative; 
    color: #fff; 
    padding: 0px 20px 0px; 
    text-align: center 
} 
.view a.info { 
    display: inline-block; 
    text-decoration: none; 
    padding: 7px 14px; 
    background: #000; 
    color: #fff; 
    font-family: Raleway, serif; 
    text-transform: uppercase; 
    box-shadow: 0 0 1px #000 
} 
.view a.info:hover { 
    box-shadow: 0 0 5px #000 
} 

/*2*/ 

.view-second img { 
    transition: all 0.2s ease-in; 
    -webkit-transition: all 0.2s ease-in; 
} 
.view-second .mask { 
    background-color: rgba(12, 19, 27, 0.6); 
    width: 300px; 
    padding: 105px; 
    height: 200px; 
    opacity: 0; 
    transform: translate(265px, 145px) rotate(45deg); 
    -webkit-transform: translate(265px, 145px) rotate(45deg); 
    transition: all 0.2s ease-in-out; 
    -webkit-transition: all 0.2s ease-in-out; 
} 
.view-second h2 { 
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); 
    font-family: Raleway, serif; 
    background: transparent; 
    margin: 20px 40px 0px 40px; 
    -webkit-transform: translate(200px, -200px); 
    transform: translate(200px, -200px); 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 
.view-second p { 
    transform: translate(-200px, 200px); 
    -webkit-transform: translate(200px, -200px); 
    transition: all 0.2s ease-in-out; 
    -webkit-transition: all 0.2s ease-in-out; 
} 
.view-second a.info { 
    transform: translate(0px, 100px); 
    -webkit-transform: translate(0px, 100px); 
    transition: all 0.2s 0.1s ease-in-out; 
    -webkit-transition: all 0.2s 0.1s ease-in-out; 
} 

/* */ 

.view-second:hover .mask { 
    opacity:1; 
    transform: translate(-80px, -125px) rotate(45deg); 
    -webkit-transform: translate(-80px, -125px) rotate(45deg); 
}        
.view-second:hover h2 { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    transition-delay: 0.3s; 
    -webkit-transition-delay: 0.3s; 
} 
.view-second:hover p { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    transition-delay: 0.4s; 
    -webkit-transition-delay: 0.4s; 
} 
.view-second:hover a.info { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    transition-delay: 0.5s; 
    -webkit-transition-delay: 0.5s; 
} 

</style> 

</head> 

<body> 

<div id="all"> 

<div class="view view-second"> 
    <img src="http://jacobstone.co.uk/Livetesting/book.jpg" /> 
    <div class="mask"></div> 
    <div class="content"> 
     <h2>CorpTax Mapping Change</h2> 
     <p>Request for the remapping of CORPTax Balance Sheet or P&L accounts.</p> 
     <a href="#" class="info">Click Here</a> 
    </div> 
</div> 

</div> 

</body> 

</html>

источник

2014-11-19 BvilleBullet

Да, этот код содержит много эффектов «анимации», таких как переходы и переводы. Они не будут отображаться в IE9, потому что IE9 не поддерживает их.

transform: translate(0px, 0px); 
-webkit-transform: translate(0px, 0px); 
transition-delay: 0.3s; 
-webkit-transition-delay: 0.3s;

Что происходит, что IE11 отображает код, как написано, но IE9 не является, и это как раз случается, как вы хотите. Вы можете начать с прохождения и удаления всех строк, которые говорят что-либо вроде «переход» или «оживить», и посмотреть, откуда это.

EDIT: Как напомнил мне TylerH, переводы действительно работают в IE9, но эффектов анимации не будет.

источник

2014-11-19 21:44:38

Один маленький нитпик; IE9 поддерживает преобразования с префиксом '-ms-'. Тем не менее тот же результат, однако, потому что этот префикс не используется в коде OP. – TylerH

Ах да, хороший улов. Однако анимация не будет работать. Будет редактировать. –

Internet Explorer 9 поддерживает [tramsformations] (http://msdn.microsoft.com/en-in/ie/hh393506.aspx). Меня смущает то, как неанимированная версия описывается как «совершенно прекрасная» версия, когда она фактически не выполняет то, что автор намеревался. – Sampson

Internet Exporer 9 против Internet Explorer 11

ответ

Смежные вопросы