Firefox 및 Chrome에서 CSS/XHTML 표시 문제

현재 모형 페이지를 올바르게 표시하도록 CSS를 가져 오는 데 문제가 있습니다. 머리글, 메뉴, 왼쪽/오른쪽 열 및 바닥 글이있는 두 열 페이지를 만들려고했습니다. 메뉴 부분을 제외한 모든 것이 훌륭하게 보입니다. 페이지가 인터넷 익스플로러에서 올바르게 표시되지만 Firefox와 Chrome에서 메뉴 div의 시작과 ul 사이에 큰 차이가 있음을 보여줍니다. 아래는 제 XHTML과 CSS입니다.Firefox 및 Chrome에서 CSS/XHTML 표시 문제

HTML :

#menu ul { 
    margin-left: -2.5em; 
}

에서

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> 
    <title>Template</title> 
    <link rel = "stylesheet" 
      type = "text/css" 
      href = "Layout.css" /> 
    </head> 

    <body> 

    <div id = "all"> 

     <div id = "head"> 
     <p>Header</p> 
     </div> 

     <div id = "menu"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Weapons</a></li> 
      <li><a href="#">Characters</a></li> 
      <li><a href="#">Collectables</a></li> 
      <li><a href="#">Multiplayer</a></li> 
     </ul> 
     </div> 

     <div id = "left"> 
     <p>Left Content</p> 
     </div> 

     <div id = "right"> 
     <p>Content</p> 
     </div> 

     <div id = "footer"> 
     <p>Footer</p> 
     </div> 

    </div> 

    </body> 

</html>

CSS

#all { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#head { 
    background-color: black; 
    border: black solid 1px; 
} 

#menu { 
    width: 100%; 
    background-color: red; 
    float: left; 
} 

#menu ul { 
    margin-left: -2.5em; 
} 

#menu li { 
    list-style-type: none; 
    float: left; 
    width: 8em; 
    text-align: center; 
    border: black solid 1px; 
} 

#menu a { 
    display: block; 
    text-decoration: none; 
    color: white; 
} 

#menu a:hover { 
    background-color: yellow; 
} 

#left { 
    float: left; 
    width: 200px; 
    background-color: red; 
    min-height: 30em; 
} 

#right { 
    float: left; 
    width: 600px; 
    background-color: gray; 
    min-height: 30em; 
} 

#footer { 
    clear: both; 
    color: white; 
    background-color: black; 
    text-align: center; 
    min-height: 30px; 
}

출처

2011-10-16 KennyH

업데이트 귀하의 Ul 스타일

#menu ul { 
margin: 0; 
padding: 0; 
}

출처

2011-10-16 18:26:46 Sanooj

Firefox 및 Chrome에서 CSS/XHTML 표시 문제

답변

관련 문제