IE7 탐색 메뉴 형식 지정 문제 - help please

Question

돈이 아닌 사람을 위해 아주 간단한 웹 사이트를 만들려고하고 있지만 Internet Explorer 7에서 탐색 메뉴를 사용할 수 없습니다. 이는 템플릿을 기반으로합니다.

IE8/chrome에서 올바르게 표시됩니다.

IE7에서는 첫 번째 탐색 메뉴 항목이 표시되고 다른 항목은 표시되지 않습니다.

의견을 보내 주시면 감사하겠습니다.

있는 style.css :

body { 
    margin: 0; 
    padding: 0; 
    background: #0048B3 url(images/img01.png) repeat; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 13px; 
    color: #626262; 
} 

h1, h2, h3 { 
    margin: 0; 
    padding: 0; 
    text-transform: lowercase; 
    font-family: 'Oswald', sans-serif; 
    font-weight: 300; 
    color: #7D7764; 
} 

h1 { 
    font-size: 2em; 
} 

h2 { 
    font-size: 2.8em; 
} 

h3 { 
    font-size: 1.6em; 
} 

p, ul, ol { 
    margin-top: 0; 
    line-height: 180%; 
} 

ul, ol { 
} 

a { 
    text-decoration: none; 
    color: #731F1F; 
} 

a:hover { 
} 

#wrapper { 
    overflow: hidden; 
    background: #FFFFFF url(images/img02.png) repeat-x left top; 
} 

.container { 
    width: 1200px; 
    margin: 0px auto; 
}  

/* Header */ 

#header-wrapper { 
    overflow: hidden; 
    height: 600px; 
}  

#header { 
    width: 1200px; 
    height: 620px; 
    margin: 0 auto; 
    background: url(images/img04.jpg) no-repeat right top; 
} 

/* Logo */ 

#logo { 
    overflow: hidden; 
    font-family: 'Oswald', sans-serif; 
}  

#logo h1, #logo p { 
    text-shadow: 1px 1px 0px #5E8CC3; 
    text-transform: uppercase; 
}  

#logo h1 { 
    padding: 200px 0px 0px 0px; 
    letter-spacing: -1px; 
    font-size: 100px; 
}  

#logo p { 
    margin-top: -20px; 
    padding: 0px 0px 0px 5px; 

    font-size: 20px; 
    font-weight: 300; 
    color: #B8D1EE; 
} 

#logo p a { 
    color: #696969; 
}  

#logo a { 
    border: none; 
    background: none; 
    text-decoration: none; 
    color: #FFFFFF; 
}  

/* Menu */ 

#menu-wrapper { 
    overflow: hidden; 
    height: 80px; 
}  

#menu { 
    overflow: hidden; 
    height: 80px; 
    background: url(images/img03.jpg) repeat-x left top; 
}  

#menu ul { 
    margin: 0; 
    padding: 0px 0px 0px 0px; 
    list-style: none; 
    line-height: normal; 
    font-family: 'Oswald', sans-serif; 
}  

#menu li { 
    display: inline-block; 
    border-right: 1px solid #64DAFE; 
}  

#menu a { 
    display: block; 
    height: 80px; 
    margin: 0px; 
    padding: 0px 30px; 
    line-height: 80px; 
    text-decoration: none; 
    text-transform: lowercase; 
    text-transform: uppercase; 
    font-size: 20px; 
    font-weight: 300; 
    color: #FFFFFF; 
    border: none; 
} 

#menu a:hover, #menu .current_page_item a { 
    background: url(images/img06.png) repeat-x left top; 
    text-decoration: none; 
    color: #FFFFFF; 
}  

#menu .current_page_item a { 
} 

/* Page */ 

#page { 
    overflow: hidden; 
    padding: 50px 0px 40px 0px; 
}  

/* Content */ 

#content { 
    float: left; 
    width: 800px; 
    margin-right: 24px; 
    padding: 0px 0px 0px 0px; 
}  

#content h2 { 
    padding: 0px 0px 20px 0px; 
    text-transform: uppercase; 
    font-size: 3em; 
    font-weight: 200; 
    color: #262626; 
}  

/* Sidebar */ 

#sidebar1 { 
    float: left; 
    width: 256px; 
    margin: 0px; 
    padding: 0px 0px 0px 0px; 
    color: #787878; 
} 

#sidebar1 h2 { 
    padding: 0px 0px 20px 0px; 
    text-transform: uppercase; 
    font-size: 1.5em; 
    font-weight: 200; 
    color: #262626; 
}  



/* Three Column Footer Content */ 


#footer-bg { 
    overflow: hidden; 
    padding: 50px 0px; 
}  

#footer-content { 
    text-shadow: 1px 1px 1px #003E93; 
    color: #67C8E3; 
}  

#footer-content h2 { 
    margin: 0px; 
    padding: 0px 0px 20px 0px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-size: 20px; 
    font-weight: 200; 
    color: #FFFFFF; 
}  

#footer-content a { 
    color: #56C8E3; 
}  

#footer-content a:hover { 
    text-decoration: underline; 
}  


#column1 { 
    float: left; 
    width: 280px; 
    margin-right: 30px; 
}  

#column1 p { 
    line-height: 1; 
} 

#column2 { 
    float: left; 
    width: 280px; 
    margin-right: 30px; 
}  

#column3 { 
    float: left; 
    width: 280px; 
} 

#column4 { 
    float: right; 
    width: 260px; 
}  


/* Footer */ 

#footer { 
    height: 100px; 
    margin: 0 auto; 
    padding: 50px 0px 0px 0px; 
    background: url(images/img04.png) no-repeat center top; 
} 

#footer p { 
    margin: 0; 
    padding-top: 10px; 
    line-height: normal; 
    text-align: center; 
    color: #C59C9C; 
} 

#footer a { 
    color: #C59C9C; 
}  

#marketing { 
    overflow: hidden; 
    margin-bottom: 30px; 
    padding: 20px 0px 10px 0px; 
    border-top: 1px solid #E3E3E3; 
    border-bottom: 1px solid #E3E3E3; 
} 

#marketing .text1 { 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    letter-spacing: -2px; 
    text-transform: lowercase; 
    font-size: 34px; 
    color: #345E9B; 
} 

#marketing .text2 { 
    float: right; 
} 

#marketing .text2 a { 
    display: block; 
    width: 252px; 
    height: 38px; 
    padding: 15px 0px 0px 0px; 
    background: url(images/img07.jpg) no-repeat left top; 
    letter-spacing: -2px; 
    text-align: center; 
    text-transform: lowercase; 
    font-size: 30px; 
    color: #FFFFFF; 
} 

.box1 { 
    overflow: hidden; 
    height: 300px; 
    background: url(images/img04.jpg) no-repeat center bottom; 
}  

.list-style1 { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
}  

.list-style1 li { 
    padding: 7px 0px 7px 0px; 
    border-top: 1px dashed #E7E2DC; 
}  

.list-style1 .first { 
    padding-top: 0px; 
    border-top: none; 
}  

.list-style2 { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
}  

.list-style2 li { 
    padding: 5px 0px 5px 0px; 
    border-top: 1px solid #EEEEEE; 
}  

.list-style2 a { 
    padding-left: 15px; 
    background: url(images/img10.png) no-repeat left 50%; 
    color: #717171; 
}  

.list-style2 a:hover { 
    text-decoration: underline; 
    color: #606060; 
}  

.list-style2 .first { 
    padding-top: 0px; 
    border: none; 
}  

.list-style3 { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
}  

.list-style3 li { 
    padding: 5px 0px 5px 0px; 
    background: url(images/img12.jpg) repeat-x left top; 
}  

.list-style3 a { 
    padding-left: 15px; 
    background: url(images/img13.jpg) no-repeat left 50%; 
    color: #717171; 
}  

.list-style3 a:hover { 
    text-decoration: underline; 
    color: #606060; 
}  

.list-style3 .first { 
    padding-top: 0px; 
    background: none; 
    border: none; 
}  


/* Three Column Content */ 

#four-column { 
    overflow: hidden; 
    padding: 30px 0px 30px 0px; 
    border-top: 1px solid #EEEEEE; 
    text-shadow: 1px 1px 0px #FFFFFF; 
    color: #626262; 
}  

#four-column #tbox1 { 
    float: left; 
    width: 282px; 
    margin-right: 24px; 
}  

#four-column #tbox2 { 
    float: left; 
    width: 282px; 
    margin-right: 24px; 
} 

#four-column #tbox3 { 
    float: left; 
    width: 282px; 
}  

#four-column #tbox4 { 
    float: right; 
    width: 282px; 
}  

.box-style { 
    background: #191919 url(images/img05.jpg) repeat;  
}  

.box-style h2 { 
    padding: 10px 0px; 
    letter-spacing: -1px; 
    text-transform: uppercase; 
    font-size: 20px; 
    font-weight: 200; 
    color: #515151; 
}  

.box-style .image { 
    width: 320px; 
} 

.box-style .arrow { 
    background: url(images/img06.png) no-repeat right top; 
}  

.box-style .content { 
    overflow: hidden; 
    padding: 30px; 
}  


.divider { 
    overflow: hidden; 
    height: 50px; 
    background: url(images/img04.png) no-repeat center top; 
} 

index.html을 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- 
Design by Free CSS Templates 
http://www.freecsstemplates.org 
Released for free under a Creative Commons Attribution 2.5 License 

Name  : Open-Air 
Description: A two-column, fixed-width design with dark color scheme. 
Version : 1.0 
Released : 20120818 

--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="keywords" content="210 Social Club" /> 
<meta name="description" content="210 Social Club" /> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>210 Social Club</title> 
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet" type="text/css" /> 
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="menu-wrapper"> 
     <div id="menu" class="container"> 
      <ul> 
       <li class="current_page_item"><a href="#">Homepage</a></li> 
       <li><a href="Newsletter/newsletter.htm">Newsletter</a></li> 
       <li><a href="piwigo/">Photos</a></li> 
       <li><a href="private/contacts.html">Contacts</a></li> 
      </ul> 
     </div> 
    </div> 
    <div id="header"> 
     <div id="logo" class="container"> 
      <h1><a href="#">210 Social Club</a></h1> 
     </div> 
    </div> 
    <div id="page" class="container"> 
     <div id="content"> 
      <h2 align=center>Welcome to the 210 Social Club webpage.</h2> 
      <h2 align=center>Club Purpose:</h2> 
      <div class="entry"> 
       <H3><p>The following is the purpose for which the club has been organized: To create, foster and cultivate a fraternally cooperative spirit among it's members so as to further true and sincere friendship in all it's aspects; to encourage and stimulate interest for the help of our fellow man and the pure social enjoyment for the members and their families; to include physical and athletic recreation for all.</p></H3> 
      </div> 
     </div> 
     <!-- end #content --> 
     <div id="sidebar1"> 
      <div> 
       <img src="images/img11.jpg" alt="club logo"/> 
      </div> 
     </div> 
     <!-- end #sidebar --> 
    </div> 
    <!-- end #page --> 
</div> 

</body> 
</html> 

Answer 1

문제는 인라인 블록 아마. 교체 시도이 :이

#menu li { 
    display: inline-block; 
    border-right: 1px solid #64DAFE; 
} 

:

#menu li { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    border-right: 1px solid #64DAFE; 
} 

참고 :

• IE7 inline-block problem
• forcing layout with zoom
• targeting different versions of IE