Question

我有一些看起来很好的在Chrome，IE8-9，Firefox中看起来不错，但在IE7中看起来并不像我的朋友注意到的那样。菜单和页脚都不是水平的而是垂直的。

我该如何解决这个问题？

以下是标题和页脚菜单中我的topmenu的CSS：

#main_menu {
font-family:Calibri;
font-size:24px;
background-color:#1ca46e;
height:45px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:850px;
margin-left:22px;
margin-bottom: -35px;
margin-top: -30px;
top:100px;
}

#main_menu a {
    color:#ffffff;
    height: 10px;
    display: block;
    float: left;
    width: 105px;
    text-align: center;
    margin-top: 8px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 2px;
    background-color:#1ca46e;
    border-top-width: 1px;
    border-right-width: 3px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: white;
    padding-top: 2px;
    padding-right: 12px;
    padding-bottom: 2px;
    padding-left: 5px;
    font-family: Calibri;
    vertical-align: middle;
    height:28px;
}

#main_menu a:hover {
    color:#555;
}

#main_menu li.current-menu-item a {
    text-decoration:underline;
    font-weight:bold;
    text-shadow: 2px 2px #403F40;
    }

#footer_menu {
    position:relative;
    text-align:center;
    height:75px;
    font-family:Calibri;
    margin-top:25px;
    margin-left:50px;
    color:#9221a6;
    font-size:22px;
    font-weight: bolder;
}
#footer_menu a {
    margin:5px; 
    margin-top:5px;
    margin-bottom:5px;
    color: #9221a6;
    float:left;
}

Answer 1

尝试添加“display：inline;”到你的页脚..它应该帮助你。告诉我，如果不是，我会试着找出别的东西;）

Answer 2

您似乎正在使用IE7中的css属性list-style-type:none;（但不是8），只删除<li>元素上的项目符号...

尝试添加css属性display:inline;来解决它......

Answer 3

根据您网站上的doctype <!DOCTYPE html>，我假设您使用的是html5部分功能。
这可能是IE7无法正确呈现的原因解决此问题的一种方法是使用

http://www.modernizr.com/

祝你好运

除IE7外，所有浏览器和版本的网站都很好看

3 个答案: