网站在除 IE7 之外的所有浏览器和版本中看起来都不错答案

【问题标题】：Website looks good in all browsers and versions except IE7网站在除 IE7 之外的所有浏览器和版本中看起来都不错
【发布时间】：2013-01-29 05:17:03
【问题描述】：

我的 energyshop.se 在 Chrome、IE8-9、Firefox 中看起来不错，但在 IE7 中却没有，正如我的一位朋友所注意到的那样。菜单和页脚不再是水平的，而是垂直的。

我该如何解决这个问题？

这是我在页眉和页脚菜单中的顶部菜单的 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;
}

【问题讨论】：

请粘贴菜单的 CSS 代码。
我可以补充一点，在下载 IE 查找软件后，IE6 和 IE5 看起来也很糟糕。我现在粘贴 CSS，稍等。

标签： internet-explorer cross-browser internet-explorer-7

【解决方案1】：

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

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

【讨论】：

我没有对任何一个菜单使用任何列表样式的属性，我应该将其设置为无，还是保持原样？
别管它，但可能你必须做更多的改变，所以也许值得努力创建一个 CSS 来修复这个小烦恼并用有条件的评论包装它 ([link]en.wikipedia.org/wiki/Conditional_comment )，因为可能会有更多的问题......
谢谢，我就是这么做的。我真的可以推荐你在你的标题中调用第二个 CSS（对于旧 IE）：这还可以让您编辑“所有”浏览器的原始 css，而不必担心弄乱设置你的 IE 设置。

【解决方案2】：

根据您网站上的文档类型 <!DOCTYPE html>，我假设您正在使用一些 html5 独有的功能。
这可能是IE7 无法正确渲染的原因。
解决此问题的一种方法是使用

http://www.modernizr.com/

祝你好运

【讨论】：

【解决方案3】：

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

【讨论】：

我试过这个没有结果。问题是，即使 float 在元素上，也不会像垂直组一样浮动在水平线上。
有什么东西限制了元素的宽度吗？这只是一个猜测，我现在正在下班的路上，所以我现在不能自己检查这样的东西..
似乎不是这样，因为其他元素也不会浮动。就像在这个版本的 IE 中一样，什么都不想浮动，并且 display:inline 不会改变任何东西。
但我的意思是尝试将容器的宽度设置为足够高的值..您不想垂直显示的元素的父级..不起作用？
其实我很傻。我没有在正确的位置使用 display:inline，现在我将它添加到两个菜单（menu li {display:inline}）并且我让它们都排成一行！非常感谢兄弟