与IE7-8的对齐问题

Question

我遇到了跨浏览器兼容性的主要问题。这张照片说明了问题：

我为IE7-8添加了什么代码，以便我的菜单正确对齐？现在它在Firefox中看起来正确，但没有别的。

这是她的菜单代码（可能还有其他相关代码，但我不知道，请参阅actual site）：

.custom .menu { 
    height:25px;
    border: 1px none; 
    float:right;

}

我已经尝试了其他线程中提到的内容，overflow:hidden; /给出宽度/ margin: 0 auto等。没有任何作用，只会破坏Firefox。

Answer 1

尝试

.custom .menu {
     height: 106px;
     border: 0px none;
     float: right;
}


.custom #header {
     background: transparent;
     height: 80px;
     top: -80px;
     position: relative;
     border-bottom: 0;
}

Answer 2

基于我在Mac上的Safari中看到的内容，它与您遇到的问题类似。有一些CSS问题。

#header { float:left; }
.menu-menu-top-container { float:right; }

删除：

#header { clear:both; }
.custom .menu { height:25px; }

但这个网站存在很多问题。我个人用html和css开始。这是我很长一段时间见过的陌生代码之一。

Answer 3

你有HTML issues可能是原因。例如，资源管理器讨厌无效的HTML，并且最难确定您的意图。其他浏览器会做出不同的猜测，并且您的网站也会在Safari中被破坏。重点是，除非你遵循标准，渲染将是不可预测的。

您有两个无效的<ul>个空元素。

  

<ul>需要<li>

<div id="sidebar_1" class="sidebar">
    <ul class="sidebar_list">
    </ul>
</div>
<div id="sidebar_2" class="sidebar">
    <ul class="sidebar_list">
    </ul>
</div>

修复HTML后，只会处理您的CSS问题。