Переходы CSS не работают в IE

У меня странная проблема с моим CSS. Код включает теги, отформатированные в прямоугольных фигурах, и при наведении этих фигур меняются от белого текста с зеленым фоном до зеленого текста с белым фоном. Я использовал переходы CSS, чтобы сделать эту анимацию раньше (и она тоже работала в IE), поэтому я совершенно недоумеваю, почему она сейчас не работает. Он отлично работает в Chrome и Firefox, но в IE ничего не делает; он даже не меняет цвета.Переходы CSS не работают в IE

Вот мой CSS:

 #wrapper { 
      width: 70%; 
      margin-top: -1%; 
      margin-left: auto; 
      margin-right: auto; 
      min-width: 950px; 
      text-align: center; 
     } 
     #header { 
      padding: 10px; 
      text-align: center; 
      -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      box-shadow:   0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
     } 
     #header img { 
      max-width: 100%; 
     } 

     a { 
      float: left; 
      position: relative; 
      display: inline-block; 
      margin-top: 2%; 
      margin-right: 1.5%; 
      width: 32.3%; 
      padding-top: 5%; 
      padding-bottom: 5%; 
      background-color: #259b24; 
      opacity: 0.8; 
      -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      box-shadow:   0px 3px 2px 0px rgba(50, 50, 50, 0.5);    
      text-align: center; 
      text-decoration: none; 
      color: white; 
      letter-spacing: 6px; 
      text-transform: uppercase; 
      font-weight: normal; 
      -o-transition: background-color .2s, color .2s; 
      -webkit-transition: background-color .2s, color .2s; 
      -ms-transition: background-color .2s, color .2s; 
      transition: background-color .2s, color .2s; 
      font-size: 20px; 
     } 
     a:hover { 
      background-color: #FFFFFF; 
      color: #259b24; 
     } 
     #right1, #right2 { 
      margin-right: 0; 
     } 
     a::first-line { 
      letter-spacing: 6px; 
      font-size: 40px; 
     }

и вот мой HTML:

<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <img src="logo.png" /> 
     </div> 
     <a href="google.com" id="left1">General<br />Dermatology</a> 
     <a href="google.com" id="middle1">About Us<br />&nbsp;</a> 
     <a href="google.com" id="right1">Cosmetic<br />Dermatology</a> 
     <a href="google.com" id="left2">Patient<br />Resources</a> 
     <a href="google.com" id="middle2">News<br />&nbsp;</a> 
     <a href="google.com" id="right2">Live Chat<br />Contact Us</a> 
    </div> 
</body>

Любая помощь будет принята с благодарностью. Благодаря!

источник

2014-11-01 Carter Scott Davis

Самое первое, что нужно сделать, это подтвердить свой CSS: http://jigsaw.w3.org/css-validator/ –

Измените свой вопрос, чтобы рассказать нам, какую версию IE. –

@BobBrown, его CSS отлично подходит. , , –

http://www.w3schools.com/cssref/css3_pr_transform.asp

Попробуйте добавить -ms-преобразование:

CSS Transitions работает в IE, только до тех пор, как его 9+, этот сайт является хорошим ресурсом для поддержки браузера Информации:

http://caniuse.com/#search=transform

источник

2014-11-01 20:29:43

Проблема заключается в том поплавок и дисплей: встроенный блок свойства, которые у вас есть на элементе привязки. Переходы действительно работают с IE с версии v9. Но если у вас возникают такие проблемы с CSS3-вещами, особенно в IE, когда в книге говорится, что они должны работать, я часто нахожу, что она объединяет их с некоторыми другими свойствами, которые являются виновниками. В этой ситуации поплавки всегда немного рискованны, а свойство inline-block - это еще один, который всегда стоит посмотреть.

В этом случае, если вы возьмете их обоих из {...} CSS, переход работает отлично (но, конечно, ваш макет выдувается из воды). Я вложил его в скрипку: jsfiddle.net/pyz6z9fk/ Я использую IE11 для этого.

Так что мне кажется, что вам нужно либо достичь своего макета каким-то другим способом, либо жить с переходом, который не работает в IE до (возможно!) Некоторой будущей версии. Как разместить этот дисплей в таблице CSS, чтобы ваш макет работал красиво?

источник

2014-11-01 21:48:04 GuyH

Хм. Это действительно странно! Тем не менее, спасибо. –

ответ

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