1
问题只发生在Internet Explorer 11中（在Firefox和Chrome中正常运行）。Internet Explorer 11 svg延伸的图片
Klick on the Link并转到“ÜberMich” 配置文件图片周围有4个图标，在Chrome和Firefox中它们都是普通长度。但在IE11中，它们很容易被拉长。 有谁知道Meta Tag或Deklartion可能会丢失什么？
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>我试了一下： 我包括这meta标签：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE 11有一些与svg尺度有关的问题，试着给出一个'width'或'height'，'viewBox'和其他css规则 - https://caniuse.com/#search=svg –
https： //caniuse.com/#feat=svg请参阅IE11说明。下一次，请不要发布您的整个网站... – tobiv
在您的代码中，您使用了*相对*路径，它们实际上并没有指向任何东西，因此您的演示没有SVG文件是没有意义的 –