在我的演示页面上 - (click here)当它显示在IE 11中时，（下面的HTML标记应该不可见，它至少适用于其他浏览器，例如，FF，Chrome，Yandex但不知何故，它显示在左侧。我尝试了很多，但找不到任何解决方法来解决这种情况。
<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>
contact@ioterm.com
</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;
}
请帮忙！
答案 0 :(得分：0)
您的容器是设置其中所有内容的不透明度的容器。
因此，您的.container应该是相对的，因此请尝试将position添加到relative并查看其行为。
#about .container, #subscribe .content, #contact .container {
opacity: 0;
position: relative;
}
答案 1 :(得分：0)
如果您设置应用不透明度的元素：0到位置：相对可以解决问题。
我猜，IE 11的工作方式有所不同。您的closing元素设置为position：absolute。但它与设置为不透明度的元素无关：0但与该元素的父元素有关。