Почему логотип навигационной панели в дальнем левом углу моего имени не отображается в обозревателе Internet Explorer, когда я открываю веб-страницу HTML?

Ниже мой HTML-код для панели навигации. Я запустил полный код веб-сайта с одинаковым штрих-кодом, и два браузера Chrome и Safari успешно отобразили изображение. Тем не менее, браузер Internet Explorer не, и мне интересно, как я могу это исправить?

Штрих-код навигации

<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
   </head>

   <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container-fluid">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a id="nav_a" class="navbar-brand pull-left" href=""><img id="nav_img" class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png" alt="Logo design"></a>
               <h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center">Liam Docherty's Digital Portfolio</h5>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav navbar-center">
                  <h5 class="nav-title text-center center-block hidden-xs ">Liam Docherty's Digital Portfolio</h5>
               </ul>
               <ul class="nav navbar-nav navbar-right">
                  <li><a href="../HTML%20web%20pages/Homepage%20Section1-2.html">Home</a>
                  </li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Units <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="../HTML%20web%20pages/Unit%206.html">Unit 6</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Unit%2014.html">Unit 14</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Unit%207.html">Unit 7</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Unit%201.html">Unit 1</a>
                        </li>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="../HTML%20web%20pages/About%20Me.html">About Me</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/CV.html">CV</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Education.html">Education</a>
                        </li>
                     </ul>
                  </li>
                  <li><a href="#contact-me">Contact Me</a>
                  </li>
               </ul>
            </div>
         </div>
      </nav>

КОД ПОЛНОГО САЙТА

      .nav-title {
      font-size: 14pt;
      color: black;
      display: block;
      margin-right: auto;
      margin-top: 30px;
      font-family: 'Roboto', sans-serif;
      margin-left: 10px;
      }
      .contact-title {
      font-size: 20pt;
      color: black;
      display: block;
      margin-right: auto;
      font-weight: bold;
      margin-top: 60px;
      font-family: 'Roboto', sans-serif;
      margin-left: 10px;
      text-align: center;
      }
      #linkbutton {
      text-align: center;
      border: none;
      background: lightgrey;
      color: black;
      cursor: pointer;
      }
      .p1 {
      font-size: 14pt;
      color: black;
      display: block;
      margin-right: -25px;
      font-family: 'Roboto', sans-serif;
      text-align: center;
      }
      .p2 {
      font-size: 14pt;
      color: black;
      display: block;
      margin-right: auto;
      font-family: 'Roboto', sans-serif;
      margin-left: 10px;
      text-align: center;
      }
      .anchorAwesome {
      position: relative;
      z-index: 99;
      display: block;
      width: 100%;
      height: 40px;
      top: 170px;
      left: -30px;
      float: left;
      text-align: center;
      }
      .anchorAwesome2 {
      position: relative;
      z-index: 99;
      display: block;
      width: 100%;
      height: 40px;
      top: 500px;
      left: -30px;
      float: left;
      text-align: center;
      }
      .anchorAwesome.FixPosition {
      position: absolute;
      bottom: 50px;
      }
      #contact-me {
      position: relative;
      }
      #nav_a {
      width: 40%;
      }
      #nav_img {
      width: 100%;
      height: 30px;
      margin-top: 10px;
      vertical-align: middle;
      }
      @media (min-width: 768px) {
      .navbar-nav.navbar-center {
      position: absolute;
      left: 50%;
      transform: translatex(-50%);
      }
      }
      .navbar.navbar-default {
      background-color: #FFFFFF;
      height: 10vh;
      z-index: 100;
      }
      .navbar.navbar-default ul {
      list-style-type: none;
      text-align: right;
      }
      .navbar.navbar-default ul li {
      display: inline-block;
      }
      .dropdown-menu li {
      text-align: center;
      }
      .dropdown .dropdown-menu {
      background-color: #FFFFFF;
      }
      .dropdown .dropdown-menu a {
      color: white;
      }
      .navbar.navbar-default ul li a {
      display: inline-block;
      padding: 3.5vh 8px 4px;
      color: black;
      text-decoration: none;
      font-size: 14pt;
      }
      .navbar.navbar-default ul li:after {
      content: '';
      position: absolute;
      right: 50%;
      bottom: 0;
      left: 50%;
      height: 3px;
      background-color: black;
      border-radius: 9px;
      transition: all .2s;
      }
      .nav.navbar-nav,
      .nav.navbar-nav>li {
      float: none;
      }
      .navbar.navbar-default ul li:hover:after {
      right: 0;
      left: 0;
      }
      .navbar.navbar-default ul.dropdown-menu li,
      .navbar.navbar-default ul.dropdown-menu li a {
      position: relative;
      display: block;
      }
      .section {
      min-height: 100vh;
      }
      .one {
      background-color: #FFFFFF;
      }
      .two {
      background-color: #FFFFFF;
      }
      #sections .section {
      padding-top: 50px;
      }
      .hero {
      background: url("https://static.pexels.com/photos/38892/pexels-photo-38892.jpeg") center center no-repeat;
      background-attachment: fixed;
      background-size: cover;
      width: 100%;
      max-width: 100%;
      width: 100vw;
      height: 60%;
      }
      .shape {
      border-radius: 25px;
      border:2px solid white;
      background-image: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
      background-size: contain;
      height: 300px;
      margin: auto;
      padding: 3px;
      width: 300px;
      top: 15%;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      z-index: 10;
      }
      .fa-angle-down {
      color: black;
      position: absolute;
      margin-bottom: auto;
      }
      .fa-angle-up {
      color: black;
      position: absolute;
      margin-bottom: auto;
      }
      .s1-text {
      height: 20pt;
      display: inline-block;
      text-align: center;
      font-size: 20pt;
      color: black;
      font-family: 'Roboto', sans-serif;
      z-index: 99;
      position: absolute;
      bottom: 60px;
      top: 440px;
      left: 10px;
      right: 0px;
      }
      a {
      color: #337ab7;
      text-decoration: none;
      position: relative;
      z-index: 99999;
      }
      .moreMe {
      color: #337ab7;
      text-decoration: none;
      position: relative;
      color: black;
      z-index: 99999;
      }
      .s2-text {
      height: 20pt;
      display: inline-block;
      text-align: center;
      color: black;
      font-size: 20pt;
      font-family: 'Roboto', sans-serif;
      z-index: 99;
      position: absolute;
      bottom: 10px;
      top: 470px;
      left: 10px;
      right: 0px;
      }
      .s3-text {
      text-align: center;
      color: black;
      font-size: 14pt;
      font-family: 'Roboto', sans-serif;
      z-index: 99;
      position: absolute;
      bottom: 10px;
      top: 715px;
      left: 5px;
      right: 0px;
      }
      @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
      #feedback-page {
      text-align: center;
      }
      #form-main {
      width: 100%;
      float: left;
      padding-top: 0px;
      }
      #form-div {
      background-color: rgba(72, 72, 72, 0.4);
      padding-left: 25px;
      padding-right: 25px;
      padding-top: 25px;
      padding-bottom: 30px;
      width: 550px;
      float: left;
      left: 50%;
      position: absolute;
      margin-top: 30px;
      margin-left: -270px;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      }
      .feedback-input {
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 18px;
      border-radius: 0;
      text-align: left;
      color: black;
      line-height: 22px;
      background-color: #fbfbfb;
      padding: 23px 23px 23px 74px;
      margin-bottom: 10px;
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      border: 3px solid rgba(0, 0, 0, 0);
      }
      .feedback-input:focus {
      background: #fff;
      box-shadow: 0;
      border: 3px solid #3498db;
      color: black;
      outline: none;
      padding: 13px 13px 13px 54px;
      }
      .focused {
      color: black;
      border: #30aed6 solid 3px;
      }
      .textarea {
      width: 100%;
      height: 150px;
      line-height: 150%;
      resize: vertical;
      }
      .input:hover,
      textarea:hover,
      .input:focus,
      textarea:focus {
      background-color: white;
      }
      #button-blue {
      font-family: 'Roboto', sans-serif;
      float: left;
      width: 100%;
      border: #fbfbfb solid 4px;
      cursor: pointer;
      background-color: #3498db;
      color: black;
      font-size: 24px;
      padding-top: 22px;
      padding-bottom: 22px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      margin-top: -4px;
      font-weight: 700;
      }
      #button-blue:hover {
      background-color: rgba(0, 0, 0, 0);
      color: black;
      }
      .submit:hover {
      color: #3498db;
      }
      .ease {
      width: 0px;
      height: 74px;
      color: black;
      -webkit-transition: .3s ease;
      -moz-transition: .3s ease;
      -o-transition: .3s ease;
      -ms-transition: .3s ease;
      transition: .3s ease;
      }
      .submit:hover .ease {
      width: 100%;
      background-color: white;
      }
      @media only screen and (max-width: 580px) {
      #form-div {
      left: 3%;
      margin-right: 3%;
      width: 88%;
      margin-left: 0;
      padding-left: 3%;
      padding-right: 3%;
      }
      }
      button {
      color: black;
      }
<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
   </head>
   
   <body>
      <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container-fluid">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a id="nav_a" class="navbar-brand pull-left" href=""><img id="nav_img" class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png" alt="Logo design"></a>
               <h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center">Liam Docherty's Digital Portfolio</h5>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav navbar-center">
                  <h5 class="nav-title text-center center-block hidden-xs ">Liam Docherty's Digital Portfolio</h5>
               </ul>
               <ul class="nav navbar-nav navbar-right">
                  <li><a href="../HTML%20web%20pages/Homepage%20Section1-2.html">Home</a>
                  </li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Units <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="../HTML%20web%20pages/Unit%206.html">Unit 6</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Unit%2014.html">Unit 14</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Unit%207.html">Unit 7</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Unit%201.html">Unit 1</a>
                        </li>
                     </ul>
                  </li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                        <li><a href="../HTML%20web%20pages/About%20Me.html">About Me</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/CV.html">CV</a>
                        </li>
                        <li><a href="../HTML%20web%20pages/Education.html">Education</a>
                        </li>
                     </ul>
                  </li>
                  <li><a href="#contact-me">Contact Me</a>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <div id="sections">
         <div class="section one" id="section_one">
            <div class="shape"></div>
            <div class="hero"></div>
            <div class="s1-text center-block">WELCOME TO MY</div>
            <div class="s2-text center-block">PORTFOLIO</div>
            <h1 class="s3-text center-block">CLICK ON THE ARROW TO GO TO THE CONTACT ME PAGE</h1>
            <div class="container text-center">
               <a href="../HTML%20web%20pages/About%20Me.html">
               <button class="moreMe">Click on this button to go to the "About Me" page</button>
               </a>
            </div>
            <a href="#contact-me" class="anchorAwesome"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
         </div>
         <div id="contact-me" class="section two">
            <h2 class="s3-text">CLICK ON THE ARROW UP TO SCROLL UP</h2>
            <h1 class="contact-title">Get in touch</h1>
            <p class="p1">Wanna get in touch or talk to me about a project?</p>
            <p class="p2">Fill the form below or send an email to ldocherty1@student.hackney.ac.uk.</p>
            <div id="form-main">
               <div id="form-div">
                  <form class="form" id="form1">
                     <div class="name">
                        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
                     </div>
                     <div class="email">
                        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
                     </div>
                     <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
                     <div class="submit">
                        <input type="submit" value="SEND" id="button-blue" />
                        <div class="ease"></div>
                     </div>
                  </form>
               </div>
               <a href="#section_one" class="anchorAwesome2"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>
            </div>
         </div>
      </div>
      <script>
         $(document).ready(function() {
             $('#sections').fullpage();
         });
      </script>
   </body>
</html>
1
l.docherty1 24 Апр 2017 в 21:12

2 ответа

Лучший ответ

Скорее всего, это связано с вашим CSS, можем ли мы это просмотреть?


Эта проблема находится здесь:

#nav_img {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  vertical-align: middle;
  }
  @media (min-width: 768px) {
  .navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  }

Насколько я вижу, логотип исчезает только после ширины браузера в 768 пикселей по краю. При увеличении высоты или установке значения по умолчанию также отображается логотип.

Кажется, что свойство transform: translatex() содержит ошибки в Edge / iExplorer. Таким образом перенося это.

Я видел другие темы с этой проблемой, предлагая расположить ее справа, а не слева, чтобы преодолеть это.

1
Michael 24 Апр 2017 в 19:04

При просмотре в IE, если вы откроете Инструменты разработчика (f12) и посмотрите путь к изображению, перейдите по этому пути, появится ли изображение? Вы также можете изменить CSS здесь, IE может отображать CSS иначе, чем другие браузеры, поэтому вы можете использовать Dev. инструменты и посмотреть, правильно ли рендерит CSS.

0
BunkerBilly 24 Апр 2017 в 18:16
43595034