Непрозрачность не работает в IE?

На моей демонстрационной странице - (click here), когда она отображается в IE 11 (этот тег HTML ниже должен быть не виден, он работает, по крайней мере, для других браузеров, например, FF, Chrome, Yandex), но как-то он отображается слева боковая сторона. Я много пробовал, но не смог найти обходного пути, чтобы исправить эту ситуацию.Непрозрачность не работает в IE?

<a href="#" class="close"></a>

Вот мой пример HTML:

<!doctype html> 
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]--> 
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]--> 
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]--> 
<!--[if (gt IE 7)|!(IE)]><!--> 
<html lang="en-US" class="no-js"> 
<!--<![endif]--> 
<head> 
    <!-- ============================================== 
     Title and basic Meta Tags 
     =============================================== --> 
    <meta charset="utf-8"> 
    <title>IOTERM Connected Intelligence</title> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="ioterm"> 
    <meta name="keywords" content="IOTERM,IOT,Sensors,Device,Connected"> 

    <!-- ============================================== 
     Mobile Metas 
     =============================================== --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <!-- ============================================== 
     Google Fonts 
     =============================================== --> 
    <link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <!-- ============================================== 
     CSS 
     =============================================== --> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <!-- ============================================== 
     Google Analytics 
     =============================================== --> 

    <script> 
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
     })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 

     ga('create', 'UA-70078154-1', 'auto'); 
     ga('send', 'pageview'); 


    </script> 
    <!-- ============================================== 
     Multi Language Pack 
     =============================================== --> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script> 
    <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script> 
    <script src="js/langpack/nonDynamic.js" charset="utf-8" type="text/javascript"></script> 
    <script type="text/javascript" src="js/modernizr.custom.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/plugins.js"></script> 
    <script type="text/javascript" src="js/jquery.velocity.min.js"></script> 
    <script type="text/javascript" src="js/jquery.kenburnsy.min.js"></script> 
    <script type="text/javascript" src="js/init.js"></script> 


    <script type="text/javascript"> 
     // Create language switcher instance and set default language to en 
     var lang = new Lang('tr'); 

    </script> 
</head> 
<body class="preload"> 

    <!-- Overlay --> 
    <div id="firefly" class="bg-overlay"> 
     <canvas id="star-canvas"></canvas> 

    </div> 
    <!-- End Overlay --> 
    <div class="lang"> 
     <a href="#turkish" onclick="window.lang.change('tr'); return false;"><img src="images/turkey-icon.png" alt="Türkçe" ></a> 
     <a href="#english" onclick="window.lang.change('en'); return false;"><img src="images/uk-icon.png" alt="English" ></a> 

    </div> 
    <!-- Header --> 
    <header> 

     <div class="intro"> 

      <!-- Site Logo --> 
      <div class="logo"></div> 
      <!-- End Site Logo --> 
      <!-- Rotator Title --> 
      <div id="rotate"> 
       <h1 class="rotate" lang="tr">BİZ <span lang="tr">NESNELERİN İNTERNETİ (IOT)</span><br>ÇÖZÜMLERİ <br>ŞİRKETİYİZ, <span lang="tr">BİZ IOTERM'ÜZ</span></h1> 

       <h1 class="rotate" lang="tr">DAHA İYİ <br><span lang="tr">BİR DÜNYA İÇİN</span> <br lang="tr">BÜTÜNLEŞİK BİLGİ <span lang="tr">SAĞLIYORUZ.</span></h1> 
      </div> 
      <!-- End Rotator Title --> 

      <p lang="tr">ÇOK YAKINDA</p> 
      <p><span></span><i class="fa fa-hourglass-half"></i><span></span></p> 
      <p lang="tr">GELİYORUZ</p> 

     </div> 
     <!-- Nav --> 
     <nav> 
      <ul class="navigation"> 

       <li class="link center bottom move"><a href="#contact" title="Contact"><span lang="tr">İLETİŞİM</span></a></li> 

      </ul> 
     </nav> 
     <!-- End Nav --> 
    </header> 
    <!-- End Header --> 

    <!-- Contact Section --> 
    <section id="contact" data-direction="from-right"> 
     <div class="container fill"> 
      <h1> 
       <span lang="tr">İLETİŞİM</span> 
      </h1> 
      <!-- ./End Section Title --> 
      <a href="#" class="close"></a> 
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2"> 
        <h4 lang="tr">BİZE E-POSTA GÖNDEREBİLİR VEYA AŞAĞIDAKİ FORMU DOLDURABİLSİNİZ. SİZE EN KISA SÜREDE GERİ DÖNÜŞ YAPACAĞIZ.</h4> 
        <!-- Begin Phone --> 
        <div class="newline col-sm-3 text-center"> 
         <i class="fa fa-mobile fa-2x"></i> 
         <br> 
         +90 (530) 1407342 
        </div> 
        <!-- End Phone --> 
        <!-- Begin Email --> 
        <div class="newline col-sm-3 text-center"> 
         <i class="fa fa-envelope-o fa-2x"></i> 
         <br> 
         [email protected] 
        </div> 
        <!-- End Email --> 
        <!-- Begin Address --> 
        <div class="newline col-sm-3 text-center"> 
         <i class="fa fa-home fa-2x"></i> 
         <br> 
         IOTERM 
         <br> 
         İstanbul, <span lang="tr">Türkiye</span>. 
        </div> 
        <!-- End Address --> 
        <!-- Begin Address --> 
        <div class="newline col-sm-3 text-center"> 
         <i class="fa fa-home fa-2x"></i> 
         <br> 
         IOTERM 
         <br> 
         Boston, <span lang="tr">ABD</span>. 
</div> 
        <!-- End Address --> 
        <div class="clearfix"></div> 
        <div class="contactForm"> 
         <!-- Start Contact Form --> 
         <form id="contactForm" action="#" method="post" role="form"> 

          <div class="col-lg-6 col-xs-12"> 
           <div class="form-group"> 
            <input id="formName" type="text" class="input required" name="name" placeholder="Adınız" lang="tr"> 
           </div> 
           <div class="form-group"> 
            <input id="formEmail" type="email" class="input required" name="email" placeholder="E-posta adresiniz" lang="tr"> 
           </div> 
           <div class="form-group"> 
            <input id="phone" type="text" placeholder="Telefon numaranız" value="" size="30" name="phone" lang="tr"> 
           </div> 
          </div> 

          <div class="col-lg-6 col-xs-12"> 
           <div class="form-group"> 
            <textarea id="message" class="textarea required" name="message" rows="3" cols="40" placeholder="Sorunuz" lang="tr"></textarea> 
           </div> 
           <button value="Submit" id="submit" class="btn btn-green-border btn-lg" type="submit" lang="tr">GÖNDER</button> 
          </div> 

         </form> 
         <div class="successMsg"></div> 
         <!-- End Contact Form --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
    <!-- End Contact Section --> 


</body> 
</html>

Вот соответствующая часть CSS:

/*======================== SECTIONS ========================*/ 
section { 
    font: 1em/1.5em "Raleway", Helvetica, Arial, sans-serif; 
    color: #fff; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: rgba(120,184,195,0.6); 
    z-index: -99999; 
    overflow: hidden; 
} 
.container { 
    overflow-y: auto; 
} 
#about .content, #solutions .container, #contact .container { 
    opacity: 0; 
} 

#about.active .content, #solutions.active .container, #contact.active .container { 
    opacity: 1; 
} 
.intro { 
    color: #FFFFFF; 
    display: block; 
    margin: 0 auto; 
    position: absolute; 
    top: 50%; 
    -moz-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    width: 100%; 
    text-align: center; 
} 
.intro h1 { 
    position: relative; 
    font-size: 70px; 
    line-height: 1.1; 
    letter-spacing: -2px; 
    font-weight: 500; 
    text-transform: uppercase; 
    text-align: center; 
    color: #ffffff; 
    width: 100%; 
} 
.intro h1 span { 
    font-weight: 700; 
    color: #48C0F4; 
    letter-spacing: -1px; 
} 
.intro p { 
    font-size: 18px; 
    letter-spacing: 0.4em; 
    margin: 0; 
    text-transform: uppercase; 
} 
.intro p span { 
    border-color: #FFFFFF; 
    border-right: 0 none; 
    border-style: solid; 
    border-width: 1px 0px 0px; 
    display: inline-block; 
    margin: 6px 10px; 
    width: 100px; 
} 
.intro i { 
    color: #48C0F4; 
} 
section h1 { 
    font-size: 70px; 
    line-height: 1.1; 
    font-weight: 500; 
    margin: 80px 0px 40px 0px; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    color: #FFF; 
    white-space: nowrap; 
    text-align: center; 
} 

section h1 span { 
    display: inline-block; 
    font-weight: 700; 
    border-bottom: 3px solid #48C0F4; 
    padding-bottom: 0.15em; 
} 

.newline { 
    margin-top: 20px; 
} 

#about, #contact, #solutions { 
    background: rgba(15,52,107,0.6); 

} 
#about.active, #contact.active, #solutions.active { 
    background: rgba(58, 115, 107,0.6); 
} 
/*======================== CLOSE BUTTON ========================*/ 
.close { 
    position: absolute; 
    top: 50%; 
    right: 5%; 
    display: block; 
    width: 58px; 
    height: 58px; 
    opacity: 0.5; 
    margin-top: -30px; 
    margin-left: -30px; 
    background: url('../images/close.png') no-repeat center center; 
    border: 2px solid #ffffff; 
    border-radius: 100%; 
    -webkit-border-radius: 100%; 
} 
#contact .close { 
    top: 7%; 
    left: 50%; 

} 
#solutions .close { 
    right: 5%; 
} 
#about .close { 
    left: 5%; 
} 
.close:hover, .close:hover:before, .close:hover:after { 
    opacity: 0.9; 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

.contactForm { 
    padding-top: 40px; 
} 
#contact i { 
    background: rgba(72,192,244,0.9); 
    color: #fff; 
    border-radius: 100%; 
    display: inline-block; 
    font-size: 24px; 
    height: 50px; 
    width: 50px; 
    margin-left: 3px; 
    padding-top: 12px; 
    text-align: center; 
    -webkit-transition: all 300ms ease-in-out 0s; 
    -moz-transition: all 300ms ease-in-out 0s; 
    -ms-transition: all 300ms ease-in-out 0s; 
    -o-transition: all 300ms ease-in-out 0s; 
    transition: all 300ms ease-in-out 0s; 
} 
.form-group{ 
margin-bottom:0px; 
} 

/*======================== ANIMATION ========================*/ 
a, .close:before, .close:after { 
    -webkit-transition: all 1s ease-in; 
    -moz-transition: all 1s ease-in; 
    -ms-transition: all 1s ease-in; 
    -o-transition: all 1s ease-in; 
    transition: all 1s ease-in; 
} 
section { 
    -webkit-transition: background 1s ease-in; 
    -moz-transition: background 1s ease-in; 
    -ms-transition: background 1s ease-in; 
    -o-transition: background 1s ease-in; 
    transition: background 1s ease-in; 
} 

/*======================== RESPONSIVE ========================*/ 
@media only screen and (max-width: 1123px) { 
h1, .intro h1 { 
    font-size: 58px; 
} 
} 
@media only screen and (max-width: 1023px) { 
h1, .intro h1 { 
    font-size: 48px; 
} 
.navigation .link.left { 
    left: 30px; 
} 
.navigation .link.right { 
    right: 30px; 
} 
.close { 
    top: 50%; 
    right: 4%; 
    width: 40px; 
    height: 40px; 
    margin-top: -25px; 
    margin-left: -25px; 
} 
#contact .close { 

    top: 92%; 
    left: 50%; 
} 
} 
@media (min-width: 768px) { 
.intro h1 { 
padding:0px 85px; 
} 
} 
@media only screen and (max-width: 767px) { 
html, body { 
    overflow-y: auto !important; 
} 
body { 
    height: auto !important; 
} 
header { 
    position: relative !important; 
    top: auto !important; 
    left: auto !important; 
    right: auto !important; 
    bottom: auto !important; 
    min-height: 550px; 
} 
.intro h1 { 
    font-size: 40px; 
} 
.intro p{ 
font-size:16px; 
} 
.intro p span { 
width:80px; 
} 
section { 
    position: relative !important; 
    top: auto !important; 
    left: auto !important; 
    right: auto !important; 
    bottom: auto !important; 
    z-index: 2 !important; 
    opacity: 1 !important; 
} 
section .content, section .container { 
    opacity: 1 !important; 
} 
.navigation { 
    display: none; 
} 
section { 
    padding: 4em 0; 
} 
#solutions { 
    padding: 0; 
} 
#solutions h1 { 
    background: none !important; 
    height: auto; 
    padding: 0px !important; 
} 
.close { 
    display: none; 
} 
} 
@media only screen and (max-width: 500px) { 
body { 
    font-size: 14px; 
    border: 0px solid transparent; 
} 
h1, .intro h1 { 
    font-size: 32px; 
} 
h2 { 
    font-size: 28px; 
} 
h3 { 
    font-size: 24px; 
} 
h4 { 
    font-size: 20px; 
} 
.intro p{ 
font-size:14px; 
} 
.intro p span { 
width:60px; 
} 
section h1 { 
    font-size: 2.5em; 
    margin-top: 0px; 
} 
} 
.lang { 
    position: relative !important; 
    margin-top: 0.7em !important; 
    margin-right: 0.7em !important; 
    float:right; 
    z-index: +5; 

}

Помогите пожалуйста!

источник

2015-12-14 Cenk

Ваш контейнер - это тот, кто устанавливает непрозрачность всего содержимого внутри него. Итак, ваш .container должен быть относительным, поэтому постарайтесь добавить position в relative и посмотреть, как он себя ведет.

#about .container, #subscribe .content, #contact .container { 
    opacity: 0; 
    position: relative; 
}

источник

2015-12-14 12:58:41 Elow

Не работает @Elow. Прежде всего, этот CSS работает для Chrome, FF и т. Д., Поэтому должно быть что-то еще. Кстати, если я изменяю непрозрачность на 0, так как вы предположили, что тег закрытия полностью исчезает. Я хотел бы сделать это, чтобы скрыть его при загрузке первой страницы для IE, и когда ссылка на навигацию будет нажата в нижней части страницы, появится этот тег закрытия. – Cenk

Отредактировал свой ответ, теперь я получаю его код :) – Elow

Кажется, относительный трюк, но на этот раз положение тегов закрытия ломается. Должен ли я относиться к этим? '#contact .close { \t наверх: 7%; левый: 50%; } #solutions .close { \t Право: 5%; } # about .close { \t левый: 5%; } ' – Cenk

Если вы установили свой элемент, который применяет непрозрачность: 0 к позиции: относительная, которая может устранить проблему.

Я думаю, IE 11 работает как-то иначе. Ваш закрывающий элемент установлен в положение: абсолютное. Но это не относится к элементу, установленному в непрозрачность: 0, но к родительскому элементу этого элемента.

источник

2015-12-14 13:46:47 Sven

Привет @Sven, спасибо за ваш ответ, позиция относительная исправила проблему, но на этот раз позиция тега close прекратилась. Пожалуйста, проверьте мой комментарий к ответу Elow. – Cenk

Привет, только что проверили еще раз и есть причина, по которой начальный элемент 'id-'contact' остался слева: 0 и после посещения (закрыто) осталось 100%? – Sven

где у тебя это @Sven? – Cenk

Непрозрачность не работает в IE?

ответ

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