Question

我构建了一个带有一些滚动和一些第一信息的登陆页面。它适用于Chrome / Firefox / Safari，但不适用于IE / Edge。 IE / Edge不加载任何样式。就像没有任何CSS一样。

我的CSS是有效的，我读到了IE的一些问题，但我找不到解决方案。我应该检查哪些点以获得IE / Edge的工作解决方案？

以下是HTML代码：

    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" initial-scale="1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>TITLE</title>

    <link rel="stylesheet" href="styles/large.css" type="css/text" media="screen and (min-width: 1200px)" />
    <link rel="stylesheet" href="styles/middle.css" type="css/text" media="screen and (min-width: 1000px)" />
    <link rel="stylesheet" href="styles/small.css" type="css/text" media="screen and (min-width: 860px)" />

    <link rel="stylesheet" href="styles/mobil.css" type="css/text" media="screen and (max-width: 860px)" />
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


<script type="text/javascript">

    $(window).bind('scroll', function() {
         if ($(window).scrollTop() > 0) {
             $('#scroll-arrow').animate(
               {opacity : 0}, 1000);
         }
         else {
           $('#scroll-arrow').animate(
             {opacity : 1}, 100);
         }
    });


</script>

<script type="text/javascript">



 $(document).ready(function(){

  var screenheight = $(window).height();
  var secondsiteheight = $("#second-site").height();
  var headerheight = $("#headertext").height();

  var margin = (screenheight - secondsiteheight) / 2;

  $("#first-site").height(screenheight);

  $("#second-site").css("margin-top", margin);
  $("#second-site").css("margin-bottom", margin);

  var arrowheight = $("#scroll-arrow>img").height();
  var top = screenheight - arrowheight - headerheight/2;

  $("#scroll-arrow>img").css("top", top);

});


</script>
</head>

<body>

<div id="headertext">
  HEADERTEXT
</div>


<div id="first-site">
<img src="img/background.png">
<div id="scroll-arrow">
  <img src="img/Pfeil.png">
</div>
</div>

<div id="second-site">
<p>Some Text </p>
<p id="logoname">NAME</p>
<br>
<p>SOME MORE TEXT</p>
<a href=www.facebook.de/NAME>
<img id="fb" src="img/facebook.png">
</a>
<br><br>
<p>Some more Text</p>
<p>Some more Text</p>
</div>

  </body>
</html>

这里也是CSS（例如large.css）

@import url(https://fonts.googleapis.com/css?family=Cinzel);

*{
padding: 0;
margin: 0;
}

body{
  margin: 0px auto;
  padding: 0px;
  background: url('../img/background.png') no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: auto 100%;
  background-color: black;
  overflow-x: hidden;
}

a{
text-decoration: none;
}

#headertext{
color: white;
text-align: center;
font-size: 25px;
margin-top: 15px;
font-family: 'Cinzel', serif;
width: 100%;
margin-left: auto;
margin-right: auto;
position: fixed;
margin-bottom: -15px;
}

#first-site img{
height: 90vh;
z-index: 1;
background-color: rgba(0,0,0,0);
visibility: hidden;
}

#scroll-arrow{
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
    width: 100%;
}

#scroll-arrow img{
position: absolute;
visibility: visible;
height: 6vh;
width: 100%;
left: 50%;
transform: translateX(-50%);
}

#second-site{
background-color: rgba(0,0,0,0.7);
width: 100%;
margin-top: 10vh;
margin-bottom: 35vh;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
float: left;
text-align: center;
max-height: 100vh;
}

#second-site p{
  color: white;
  font-size: 25px;
}

#fb{
height: 30px;
margin-top: 5px;
}

#fb:hover{
height: 38px;
margin-bottom: -8px;
}

#logoname{
color: white;
text-align: center;
font-size: 25px;
font-family: 'Cinzel', serif;
}

IE / Edge不加载样式

0 个答案: