1
Le problème se produit uniquement dans Internet Explorer 11 (fonctionne bien dans Firefox et Chrome). Klick sur le lien et aller à "Über Mich" Il ya 4 icônes autour de l'image de profil, dans Chrome et Firefox, ils sont normaux Longueur. Mais dans IE11, ils ont peur d'être étirés. Est-ce que quelqu'un sait ce que Meta Tag ou Deklartion pourrait manquer?Internet Explorer 11 svg Photos étendues
artist-theme.robert-filatow.de
*, *:before, *:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
/*Start of "Micro clearfix" */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after{
clear:both;
}
/*End of "Micro clearfix" */
body{
font-family: 'Open Sans', sans-serif;
}
.roboto{
font-family: 'Roboto', sans-serif;
}
/*header{
background-color: #555;
height: 900px;
background-image: url("media/background_1.jpg");
background-size: cover;
background-repeat: no-repeat;
}*/
.logo{
width: 65px;
height: 65px;
float:left;
margin-left: 32px;
margin-top: 10px;
}
.logo img{
opacity: 0.67;
}
nav{
float:right;
margin-top: 35px;
}
nav li{
display:inline-block;
list-style-type: none; /* ohne Aufzählungspunkte */
margin-right: 80px;
}
nav li a{
color: #fff;
text-decoration:none;
text-transform: uppercase;
font-size: 1.0em;
font-weight:600;
}
nav li a:hover{
display:block;
opacity: 0.7;
animation: shake 1s;
}
h1{
color: #fff;
text-align: center;
font-size: 5em;
text-transform: uppercase;
letter-spacing: 0.2em;
clear:both;
animation: fadeIn 4s;
font-family: 'Open Sans', sans-serif;
}
h1 span{
border: 10px solid #fff;
padding: 0.1em 0.3em 0.1em 0.5em;
display: inline-block;
margin: 290px auto 0;
}
h2{
color:#e9c381;
text-align: center;
text-transform: uppercase;
font-size: 22px;
margin-top: 167px;
margin-bottom: 50px ;
}
#kicker{
text-align: center;
font-size: 2em;
letter-spacing: 0.1em;
font-weight: 300;
display: block;
margin-top: -5px;
animation: fadeInUpBig 4s;
}
#kicker p{
color: white;
}
footer{
background-color: grey;
height: 230px;
position:relative;
background-image: url("media/background_1.jpg");
background-size: cover;
background-position: center bottom;
}
footer .logo{
float:left;
margin-top: 80px;
margin-left: 115px;
}
footer nav{
float:left;
margin: 0;
padding-top: 85px;
padding-left: 50px;
}
footer nav li{
display:inline-block;
list-style-type: none; /* ohne Aufzählungspunkte */
margin-right: 80px;
}
footer nav li a{
color: #fff;
text-decoration:none;
text-transform: uppercase;
}
footer p{
position: absolute;
top:170px;
clear:both;
padding-left:230px;
margin-top: -50px;
color: #fff;
opacity: 0.73;
}
/* About*About*About*AboutAbout*AboutAbout*AboutAbout*AboutAbout*AboutAbout*About*/
.face-lockup{
max-width:1000px;
display:flex;
margin: 0 auto;
justify-content: space-between;
align-items: center;
}
.face-img{
order:3;
}
.icon-pencil{
background-color: /*#c9c7c9*/white;
height: 100px;
width: 100px;
border-radius: 50%;
display:flex;
order:1;
}
.img-pencil{
margin: auto;
}
.icon-mouse{
background-color: /*#c9c7c9*/white;
height: 100px;
width: 100px;
border-radius: 50%;
display:flex;
order:2;
}
.img-mouse{ margin: auto;}
.icon-browser{
background-color: /*#c9c7c9*/white;
height: 100px;
width: 100px;
border-radius: 50%;
display:flex;
order:4;
}
.img-browser{ margin: auto;}
.icon-menu{
background-color:/*#c9c7c9*/white;
height: 100px;
width: 100px;
border-radius: 50%;
display:flex;
order:5;
}
.img-menu{ margin: auto;}
.fließtext{
}
.fließtext p{
width: 730px;
margin: 114px auto;
text-align: center;
color:#595959;
line-height: 41px;
font-size: 20px;
}
/*SKILLS**SKILLS**SKILLS**SKILLS**SKILLS**SKILLS**SKILLS**SKILLS**SKILLS**SKILLS*/
.flexcontainer{
display: flex;
justify-content: space-between;
width: 1000px;
margin: 0 auto 167px;
}
.skillbarBG{
background-color: #e6e3e6;
width:323px;
height:6px;
}
#skillslinks{
width:323px;
}
#photoshop{
background-color: #d29f4e;
height:6px;
width:90%;
}
#skillslinks p{
text-align: right;
text-transform: uppercase;
color:#a8a8a8;
font-size: 12px;
margin-top: 9px;
margin-bottom: 68px;
letter-spacing: 2px;
}
#css3{
background-color: #d29f4e;
height:6px;
width:60%;
}
#koncept{
background-color: #d29f4e;
height:6px;
width:70%;
}
#skillsrechts{
width:323px;
}
#skillsrechts p{
text-transform: uppercase;
color:#a8a8a8;
font-size: 12px;
margin-top: 9px;
margin-bottom: 68px;
letter-spacing: 2px;
}
#html5{
background-color: #d29f4e;
height:6px;
width:95%;
}
#javascript{
background-color: #d29f4e;
height:6px;
width:30%;
}
#responsive{
background-color: #d29f4e;
height:6px;
width:70%;
}
/*WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK*/
/*WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK*/
/*WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK**WORK*/
.container{
width: 1332px;
margin: 114px auto;
padding:0;
}
.press {
padding: 0;
margin: 0;
display: block;
height: 258px;
}
.float{
float:left;
}
.greyBG{
height:866px;
width: 100%;
background-color: #ecebeb;
padding-top: 10px;
}
.greyBG h2{
margin-top: 80px;
}
/*OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION*/
/*OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION*/
/*OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION**OVERLAY ANIMATION*/
.content_article {
position: relative;
float: left;
}
.content_overlay {
background-color: #512606;
height: 0%;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: all ease-in-out 250ms 0s;
}
.content_article:hover > .content_overlay {
opacity: 0.5;
height: 100%;
cursor: pointer;
}
/*Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients*/
/*Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients*/
/*Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients**Clients*/
.clients-belt{
width: 100%;
position:relative;
}
.client-unit{
max-width: 750px;
margin: 0 0 50px -375px;
display:flex;
position: absolute;
top:0px;
left: 50%;
display:none;
}
.client-unit.active-client{
display:flex;
box-shadow: none;
animation: fadeIn 1s;
}
.client-face{
text-align: center;
}
.client-face img{
border-radius:50%;
}
.client-face strong{
color:#838383;
}
.client-face em{
font-size: 12px;
font-style: normal;
color:#838383;
}
.client-content{
margin-top: -30px;
margin-left:130px;
color:#595959;
line-height: 31px;
font-size: 20px;
position: relative;
}
.client-name{
display:block;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
.clients-logos{
position:relative;
width: 750px;
display:flex;
margin: 500px auto 100px;
align-items: space-around;
justify-content: center;
}
.client-logo{
height: 110px;
margin: 0 20px;
size:contain;
position: center;
cursor:pointer;
}
.client-logo:hover{
opacity: 0.7;
}
.active-client{
box-shadow: 0px 4px 0px #d29f4e;
}
.client-controls{
position:absolute;
width: 100%;
height:20%;/*könnte für das herunterdrücken der nächsten section verantwortlich sein*/
}
.client-control-next{
position: absolute;
top: 50%;
right:10%;
}
.client-control-next:hover{
opacity: 0.7;
cursor: pointer;
}
.client-control-prev{
position: absolute;
top: 50%;
left:10%;
}
.client-control-prev:hover{
opacity: 0.5;
cursor: pointer;
}
.quote_top{
position: absolute;
top: 10px;
left: -10px;
height: 33px;
width: 50px;
}
.quote_bottom{
position: absolute;
right:-10px;
bottom: 10px;
height: 33px;
width: 50px;
}
.margin_bottom_100{
margin-bottom: 100px;
}
/*Social Social SocialSocial SocialSocial SocialSocial SocialSocial SocialSocial*/
/*Social Social SocialSocial SocialSocial SocialSocial SocialSocial SocialSocial*/
/*Social Social SocialSocial SocialSocial SocialSocial SocialSocial SocialSocial*/
.streifen{
height:5px;
width: 325px;
border: 3px solid #d29f4e;
margin: 0 auto;
}
.flexcontainer_margin_abzug{
display: flex;
justify-content: space-between;
width: 1000px;
margin: 0 auto 100px;
}
.email{
color: #ccb58c;
font-size: 82px;
cursor:pointer;
}
.email:hover{
opacity: 0.7;
}
.center{
margin: 0 auto 0 535px;
width: 670px;
}
.greyBG_2{
height:780px;
width: 100%;
background-color: #ecebeb;
padding-top: 10px;
}
.socialicons{
cursor:pointer;
}
.socialicons:hover{
opacity: 0.7;
}
/* Contact** Contact** Contact** Contact** Contact** Contact** Contact** Contact** Contact*/
/* Contact** Contact** Contact** Contact** Contact** Contact** Contact** Contact** Contact*/
/* Contact** Contact** Contact** Contact** Contact** Contact** Contact** Contact** Contact*/
form{
max-width: 750px;
margin: 0 auto 200px;
}
.flexcontainer_new{
display:flex;
margin: 100px auto 0;
width:750px;
height: 100px;
flex-direction: column;
}
.flexcontainer_new_2.0{
display:flex;
margin: 0 auto;
width:100px;
flex-direction: column;
}
.input{
height: 100px;
display: block;
border: 3px solid #e9c381;
margin-top: -10px;
color:#a8a8a8;
font-size: 16px;
letter-spacing: 2px;
padding: 5px 10px;
}
.input:hover{
opacity: 0.7;
}
.flex{
display: flex;
width: 750px;
}
.margin_left_60{
margin-left: 60px;
}
textarea{
width:100%;
height: 350px;
display: block;
border: 3px solid #e9c381;
margin-top: 10px;
color:#a8a8a8;
font-size: 19px;
letter-spacing: 2px;
padding: 10px 10px;
}
textarea:focus{
outline: none;
}
textarea:hover{
opacity: 0.7;
}
input[type=submit]{
height: 50px;
width: 250px;
background-color: #e9c381;
color: white;
margin: 30px auto;
display: block;
border: none;
}
input[type=submit]:hover{
cursor: pointer;
opacity: 0.7;
}
input[type="text"]:focus{
outline: none;
}
label{
text-transform: uppercase;
color:#a8a8a8;
font-size: 12px;
letter-spacing: 2px;
}
.margin_left_20{
margin-bottom: 20px;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- jQuery Datei-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><!--jQuery Ui -->
<link href="styles.css" rel="stylesheet" type="text/css"><!--Stylesheet muss vor .js Datei sein wenn die js. Datei auf sie zugreift. -->
<link href="animate.css" rel="stylesheet" type="text/css">
<script src="script.js" type="text/javascript"></script><!--Javascript Dokument -->
<script src="wow.min.js"></script>
<script>
new WOW().init();
</script>
<title>Minimalistisches Theme</title>
<style>
header{
background-color: white;
height: 900px;
background-image: url("media/background_1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<div class="logo fadeIn"><a href="#top"><img src="media/Logo.gif" alt="logo"></a></div>
<nav class="fadeIn">
<li><a href="#about">Über Mich</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#clients">Kunden</a></li>
<li><a href="#follow">Follow</a></li>
<li><a href="#contact">Kontakt</a></li>
</nav>
<h1>
<span>Minimalist Theme</span>
</h1>
<span id="kicker">
<p class="roboto">simple yet beautiful
</p></span>
</header>
<!-- ///////////////////////// ABOUT //////////////////////////// -->
<section>
<article>
<h2 id="about" class="margin_bottom_100 fadeIn">Über Mich</h2>
<div class="face-lockup fadeIn">
<div class="face-img"><img src="media/face5.jpg" alt="face"></div>
<div class="icon-pencil"><img class="img-pencil"src="media/pencil.svg"></div>
<div class="icon-mouse"><img class="img-mouse"src="media/mouse.svg"></div>
<div class="icon-browser"><img class="img-browser"src="media/browser.svg"></div>
<div class="icon-menu"><img class="img-menu"src="media/menu.png"></div>
</div>
<div class="wow fadeInUpSmall">
<span class=" fließtext"><p><strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</strong>
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr. sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p></span></div>
</article>
<article>
<h2 class="margin_bottom_100 wow fadeInUpBig">Fähigkeiten</h2>
<div class="flexcontainer">
<div id="skillslinks" class="wow fadeInLeft">
<div class="skillbarBG"><div id="photoshop"></div></div>
<p>Photoshop</p>
<div class="skillbarBG"><div id="css3"></div></div>
<p>css3</p>
<div class="skillbarBG"><div id="koncept"></div></div>
<p>koncept & Strategy</p>
</div>
<div id="skillsrechts" class="wow fadeInRight">
<div class="skillbarBG"><div id="html5"></div></div>
<p>html5</p>
<div class="skillbarBG"><div id="javascript"></div></div>
<p>Javascript & jquery</p>
<div class="skillbarBG"><div id="responsive"></div></div>
<p>Responsive Webdesign</p>
</div>
</div>
</article>
</section>
<!-- ///////////////////////// WORK WORK WORK WORK WORK //////////////////////////// -->
<section>
<div class="greyBG ">
<h2 id="work" class="wow fadeInUpBig">Portfolio</h2>
<div class="container cf">
<div class="content_article wow fadeInLeft">
<a class="press float" href="#"><img src="media/work1.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="content_article wow fadeIn">
<a class="press float" href="#"><img src="media/work2.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="content_article wow fadeIn">
<a class="press float" href="#"><img src="media/work3.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="content_article wow fadeInRight">
<a class="press float" href="#"><img src="media/work4.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="content_article wow fadeInLeft">
<a class="press float" href="#"><img src="media/work5.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="content_article wow fadeInUpBigSlow">
<a class="press float" href="#"><img src="media/work6.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="content_article wow fadeInUpBigSlow">
<a class="press float" href="#"><img src="media/work7.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="content_article wow fadeInRight">
<a class="press float" href="#"><img src="media/work8.png" alt=""></a>
<div class="content_overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
</div>
</div>
</section>
<!-- ///////////////////////// Clients Kopie für Slider Versuch //////////////////////////// -->
<section>
<h2 id="clients" class="margin_bottom_100 wow fadeInUpBig">Kunden</h2>
<div class="client-controls wow fadeIn">
<div class="client-control-next"><img src="media/control-next.svg"></div>
<div class="client-control-prev"><img src="media/control-prev.svg"></div>
</div>
<div class="clients-belt wow fadeIn">
<div class="client-unit ">
<div class="client-face">
<img src="media/face1.jpg" alt="client-face">
<strong class="client-name">Jonathan Doe</strong>
<em class="client-title">Director of Design, Quebec Int.</em>
</div>
<div class="client-content">
<p>
<img class="quote_top" src="media/quote_top.png" >
<strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</strong>
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr. consetetur sadipscing elitr elitr. elitr consetetur .
<img class="quote_bottom" src="media/quote_bottom.png" >
</p>
</div>
</div>
<div class="client-unit">
<div class="client-face">
<img src="media/face2.jpg" alt="client-face">
<strong class="client-name">Buzz Lightyear</strong>
<em class="client-title">Director of Design, Quebec Int.</em>
</div>
<div class="client-content">
<p>
<img class="quote_top" src="media/quote_top.png" >
<strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</strong>
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr. consetetur sadipscing elitr elitr. elitr consetetur .
<img class="quote_bottom" src="media/quote_bottom.png" >
</p>
</div>
</div>
<div class="client-unit">
<div class="client-face">
<img src="media/face3.jpg" alt="client-face">
<strong class="client-name">Max Mustermann</strong>
<em class="client-title">Director of Design, Quebec Int.</em>
</div>
<div class="client-content">
<p>
<img class="quote_top" src="media/quote_top.png" >
<strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</strong>
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr. consetetur sadipscing elitr elitr. elitr consetetur .
<img class="quote_bottom" src="media/quote_bottom.png" >
</p>
</div>
</div>
<div class="client-unit">
<div class="client-face">
<img src="media/face4.jpg" alt="client-face">
<strong class="client-name">You lost the Game</strong>
<em class="client-title">Director of Design, Quebec Int.</em>
</div>
<div class="client-content">
<p>
<img class="quote_top" src="media/quote_top.png" >
<strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</strong>
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr. consetetur sadipscing elitr elitr. elitr consetetur .
<img class="quote_bottom" src="media/quote_bottom.png" >
</p>
</div>
</div>
</div>
<div class="clients-logos wow fadeInUpBigSlow">
<div class="client-logo "><img src="media/antarktika.png" alt="antarktika logo"></div>
<div class="client-logo"><img src="media/lorem_sorem.png" alt="loremsorem logo"></div>
<div class="client-logo"><img src="media/quebec_international.png" alt="quebec international logo"></div>
<div class="client-logo"><img src="media/wikimedia.png" alt="wikimedia logo"></div>
</div>
</section>
<!-- ///////////////////////// Social Media //////////////////////////// -->
<!-- ///////////////////////// Social Media //////////////////////////// -->
<!-- ///////////////////////// Social Media //////////////////////////// -->
<section>
<div class="greyBG_2">
<h2 id="follow" class="margin_bottom_100 wow fadeInUpBig">Social Media</h2>
<div class="flexcontainer_margin_abzug">
<a href="https://www.twitter.com" target="_blank"><img class="socialicons wow fadeInLeft" src="media/twitter.png"></a>
<a href="https://www.youtube.com/" target="_blank"><img class="socialicons wow fadeInLeft" src="media/Youtube.png"></a>
<a href="https://www.pinterest.com" target="_blank"><img class="socialicons wow fadeInUpSmall" src="media/pinterest.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img class="socialicons wow fadeInRight" src="media/linkedin.png"></a>
<a href="https://www.facebook.com" target="_blank"><img class="socialicons wow fadeInRight" src="media/facebook.png"></a>
</div>
<div class="streifen"></div>
<div class="center"><a><p class="email wow fadeIn">[email protected]</p></a></div>
</div>
</section>
<!-- ///////////////////////// Kontakt //////////////////////////// -->
<!-- ///////////////////////// Kontakt //////////////////////////// -->
<!-- ///////////////////////// Kontakt //////////////////////////// -->
<section>
<h2 id="contact" class="wow fadeInUpBig" >Kontakt</h2>
<form class="form wow fadeIn">
<div class="flex">
<div class="flexcontainer_new">
<label for="name" >Dein Name: </label><br>
<input class="input" type="text" name="name" id="name" ><br>
</div>
<div class="flexcontainer_new margin_left_60" >
<label for="email" >Deine Email: </label><br>
<input class="input" type="text" name="email" id="email" ><br>
</div>
</div>
<div class="flexcontainer_new_2.0">
<label class="margin-bottom_20" for="description" >Erzähl mir von deinem Projekt: </label><br>
<textarea></textarea>
</div>
<input href="mailto:[email protected]" type="submit" value="Senden">
</form>
</section>
<!-- ///////////////////////// fOOTER //////////////////////////// -->
<footer>
<div class="logo"><a href="#top"><img src="media/Logo.gif" alt="logo"></a></div>
<nav class="fadeIn">
<li><a href="#about">Über Mich</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#clients">Kunden</a></li>
<li><a href="#follow">Follow</a></li>
<li><a href="#contact">Kontakt</a></li>
</nav>
<p>All Content Copyright 2017</p>
</footer>
</body>
</html>Ce que j'ai essayé: J'inclus cette méta Tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE 11 avoir quelques problèmes concernant les échelles svg, essayez de donner un 'width' ou un' height', 'viewBox' et d'autres règles css - https://caniuse.com/#search=svg –
https: //caniuse.com/#feat=svg Voir les notes IE11. La prochaine fois, s'il vous plaît ne pas poster l'ensemble de votre site Web ... – tobiv
Dans votre code, vous avez utilisé des chemins * relatifs * qui ne pointent réellement à rien, donc votre démo est inutile sans les fichiers SVG –