Kleine Striche unter Bild

Ich habe ein html Dokument, in dem ein Menü, das ich mit ul s gemacht habe, zeigt kleine Striche unter der Linie. Das ist mein html Quellcode:Kleine Striche unter Bild

<!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>

Das ist mein 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; 
}

Ich verwende Microsoft Edge, und diese sind die Striche ich spreche:

Es funktioniert gut in IE11:

Aber nicht in Chrome:

Ich kann keine klare Vorstellung davon bekommen, was diese "Bindestriche" sind. Hilfe???? (Vielen Dank im Voraus.)

Quelle

2016-06-26 Aravind Suresh

Sie sind die Reste von Links.

Probieren Sie etwas wie

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

Quelle

2016-06-26 05:14:27

Hey danke! Das hat funktioniert. –

Kleine Striche unter Bild

Antwort

Verwandte Themen