html - IE() 中的固定宽度布局中断

Question

我基于固定流体混合宽度布局构建了一个网页，因为我需要它在所有主要浏览器和宽屏以及普通浏览器上看起来一致。它在 Fire-Fox 和 chrome 中运行良好，但在 IE 中完全崩溃。

我有一个带有水平列表项的菜单，当悬停时有垂直元素，你不会相信，但 IE 本身不会显示垂直元素

我对这种差异感到不知所措。这是代码:

http://jsfiddle.net/thedarkjedi/wknmn/

知道为什么我将近一半专用于菜单的 CSS 停止工作了吗？它在其他浏览器中工作正常。

它只是在 IE 中崩溃，我是认真的。我不明白我在哪里犯了错误。

PS:谁也能告诉我为什么我的页脚本身和底部在黑白之间有间隙(它应该贴在页面底部，但同时如果有更多的话应该让位给内容)即使在尝试之后几乎所有在网上找到的技巧。

我与页脚相关的代码是:

<div id="FooterContainer">

 <div id="Footer" >

    <div id="Footer_Content">
    <ul id="Footer_Nav">

            <li id="Contact"><a href="#">Contact US</a></li>
            <li id="About"><a href="#">About</a></li>    
            <li id="ToC"><a href="#">Terms & Conditions</a></li>    

    </ul>
    </div>
    <div class="notice">
            Designed & Developed by Sudhanshu Nautiyal
    </div>

 </div>
 </div>

 </div>

CSS 是:

/* 页脚开始 */

#FooterContainer {

    //clear:both;
    background: #b8e1fe;

}

#Footer {


    width: 960px;
    height: 100px;
    margin: 0px auto;

}

#Footer_Content {


    text-align:center;  
}

/* Footer Navigation begins*/

#Footer_Nav {

    display: inline-block;
    //width: 100%;

    padding: 0;
    list-style: none;

}
#Footer_Nav  li {

    float:left;
}

#Footer_Nav li a {

    //display: block;
    padding: 5px 10px;
    font-family: Arial;
    font-size: 15px;
    color: #0b6998;
}
/*Footer NAvigation Ends */

Answer 1

双斜杠(//comment here)在 CSS 中不是有效的注释标记，只有完整的 C 风格注释 block 是(/* comment here */)。还有其他验证错误(例如定义元素的宽度时未指定单位 10 与 10px)。