画像の下に小さなダッシュが見える

私はulを使用して作成したメニューがラインの下に小さなダッシュを表示しているhtml文書を持っています。これは私のhtmlソースコードです：画像の下に小さなダッシュが見える

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="keywords" content="Connet, Consult, Consultation, Netconsultation"> 
    <meta name="description" content="Website of Connet Consultancy Services."> 
    <meta name="author" content="Connet development team"> 
    <title> Connet. Connect. Through the internet. </title> 
    <link rel="stylesheet" href="/page_files/css/Main.Style.css" type="text/css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> 
    <script src="/page_files/js/Default.Interactivity.js"> </script> 
    <script src="/page_files/js/Default.Processing.js"> </script> 
    <noscript title="Could not connect to script"> 
     We can't get our scripts. Reloading the page might fix it. 
    </noscript> 
    </head> 
    <body> 
     <div class="Wrapper"> 
      <nav> 
       <ul class="NavList"> 
        <li> 
         <a onclick="location.reload();"> 
          <img src="/page_files/media/home-icon.png" alt="Home"/> 
         </a> 
        </li> 
        <li> 
         <a href="/Login.html"> 
          <img src="/page_files/media/user-icon.png" alt="Login" /> 
         </a> 
        </li> 
        <li> 
         <a href="/Conroot.html"> 
          <img src="/page_files/media/connect-icon.png" alt="Enter consultation" /> 
         </a> 
        </li> 
        <li> 
         <a href="/Blog.html"> 
          <img src="/page_files/media/blog-icon.png" alt="Blog" /> 
         </a> 
        </li> 
        <li> 
         <a href="/Careers.html"> 
          <img src="/page_files/media/careers-icon.png" alt="Careers" /> 
         </a> 
        </li> 
        <li> 
         <a href="/Contact.html"> 
          <img src="/page_files/media/contact-icon.png" alt="Contact us" /> 
         </a> 
        </li> 
        <li> 
         <img src="/page_files/media/search-icon.png" alt="Search" /> 
        </li> 
        <li> 
         <input type="text" id="SearchBox" placeholder="Search..."> 
        </li> 
       </ul> 
      </nav> 

      <header> 
      </header> 

      <div class="Sections"> 
       <section class="TopSect"> 

       </section> 
       <section class="MidSect"> 

       </section> 
       <section id="NewSect"> 

       </section> 
       <section class="LogSect"> 

       </section> 
      </div> 
     </div> 
    </body> 
</html>

これは私のcssです：

/* CSS DOCUMENT */ 
body { 
    background-color: #fff; 
    color: #0094ff; 
    font-family: 'Segoe UI Light', 'Tahoma', Geneva, Verdana, sans-serif; 
    font-size: 24px; 
    font-weight: 100; 
    text-decoration: none; 
} 

ul.NavList { 
    list-style-type: none; 
    text-decoration: none; 
    text-align: center; 
    padding: 20px 20px 0 0; 
} 

ul.NavList li { 
    display: inline; 
    text-decoration: none; 
}

私はマイクロソフトのエッジを使用していて、これらは私が話しているのダッシュです：

それは、 IE11で正常に動作します： Chromeで

でもない：

これらの「ダッシュ」が何であるか明確なアイデアは得られません。助けて？？？？（ありがとうございます。）

出典

2016-06-26 Aravind Suresh

リンクの残りの部分です。

は感謝ねえ

ul.NavList li a { 
    text-decoration: none; 
}

出典

2016-06-26 05:14:27

のようなものを試してみてください！それはうまくいった。 –

画像の下に小さなダッシュが見える

答えて

関連する問題