css - 如何修复<ul>在ie8和ie9中断开但在ie7，FF，Safari和Chrome中完美的页脚

我为自己解决这个问题感到头疼，我已经自学了自己知道的代码，所以我很可能会错过一件简单的事情。但是我非常需要您的帮助，并非常感谢。

我显然希望我的网站在所有浏览器中看起来都一样，这是我一直在努力解决的主要问题。

用图片更容易解释这个问题，例如，我从ie9和ff得到了一个丝网印刷来显示给您：

Firefox，Safari，Chrome和IE7

How the footer and lists look in Firefox, Safari, Chrome & IE7

IE9和IE8（底部的灰色是正文背景）

How the footer and lists look in IE9 & IE8

这是html：

<div id="footer">
<div id="columncon">
    <div class="column">
    <h5>From The Blog...</h5>
    <ul>
        <li><a href="#">Blog Post 1<a/></li>
        <li><a href="#">Blog Post 2<a/></li>
        <li><a href="#">Blog Post 3<a/></li>
        <li><a href="#">Blog Post 4<a/></li>
        <li><a href="#">Blog Post 5<a/></li>
    </ul>
    </div>
    <div class="column">
    <h5>Social</h5>
    <ul>
        <li><a href="#">Facebook<a/></li>
        <li><a href="#">Twitter<a/></li>
        <li><a href="#">Google +<a/></li>
        <li><a href="#">RSS Subscribe<a/></li>
        <li><a href="#">E-mail Subscribe<a/></li>
    </ul>
    </div>
    <div class="column">
    <h5>Site Links</h5>
    <ul>
        <li><a href="#">Designer Resources<a/></li>
        <li><a href="#">Submit a T-Shirt<a/></li>
        <li><a href="#">Sitemap<a/></li>
        <li><a href="#">Contact Us<a/></li>
    </ul>
    </div>
    <div class="column">

    <h5>Site Links</h5>
    <ul>
        <li><a href="#">Designer Resources<a/></li>
        <li><a href="#">Submit a T-Shirt<a/></li>
        <li><a href="#">Sitemap<a/></li>
        <li><a href="#">Contact Us<a/></li>
    </ul>
    </div>
</div>
<div id="siteinfo">
<p>&copy; 2011 <a href="http://www.tshirtslut.com">TShirtSlut.com</a></p>
</div>

这是CSS：

#footer {
background: url(img/footerbg.png) 0 0;
-moz-box-shadow: 0 0px 10px #000;
-webkit-box-shadow: 0 0px 10px #000;
box-shadow: 0 0 10px #000;
height:200px;
position:relative;
clear:both;
}
#columncon {
width:1000px;
margin:0 auto;
}
.column {
float:left;
padding: 30px 25px 20px;
width: 200px;
}
.column ul {
    list-style:none;
}
    .column ul li {
        padding:2px 0;
    }
        .column ul li a{
            text-decoration:none;
            color:#fff;
            font-size:12px;
        }
        .column ul li a:hover{
            color:#49E20E;
        }
.column h5 {
    padding-bottom:10px;
    border-bottom:1px solid #fff;
    color:#fff; text-shadow: black 0.1em 0.1em 0.2em;
    font-weight:bold;
    font-size:14px;
           }
   #siteinfo {
   text-align:center;
width:100%;
margin:auto;
position:absolute;
bottom:0;
color:#fff;
font-size:12px;
    }
#siteinfo a {
    text-decoration:none;
    color:#fff;
}
#siteinfo a:hover {
    color:#49E20E;
    text-decoration:none;
}

（显然，我并不是最擅长插入代码XD）

我再一次真正地感谢任何能够为我解决这个问题并允许我解决这个问题的人。

如果您需要更多代码或信息，请询问，我将立即处理。

谢谢，

麦克风

更新：我已经修复了定位标记，以便它们可以验证，但是仍然留有一个双页脚，并且第一个列表的标题仍然保留在“双倍”页脚中。请按照网址查看图片：

--http：//tshirtslut.com/ie%28partially%20fixed%29.jpg--

最佳答案

您的html无效。将所有<a/>替换为</a>。您的问题现在解决了吗？