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文件是沒有意義的 –