网站页脚是不正常的，当我在firefox/IE中测试它，但在Chrome中工作良好

Web site footer is out of whack when i test it in firefox/IE however works fine in Chrome

本文关键字：测试 IE 但在 工作 Chrome firefox 不正常 网站      更新时间：2023-09-26

site: http://ovi-opus2.rightnowdemo.com/app

这里是页脚....如果有人对如何解决这个问题有任何想法，请让我知道。似乎有一些错误被http://validator.w3.org/检测到，它说属性alt不允许在元素a上。…el ="nofollow"YouTube href = " http://www.youtube.com/user/"> 

<div class="footerbackground">
    <div class="footercontent">
        <div class="main">
            <div class="footersocial">
                <ul id="footersocial">
                    <li id="facebook_foot"><a title="Facebook" alt="Facebook" target="_blank" rel="nofollow" href="http://www.facebook.com/OpusDev"><span>Facebook</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://www.facebook.com/OpusDev">Facebook</a></li>
                    <li id="twitter_foot"><a title="Twitter" alt="Twitter" target="_blank" rel="nofollow" href="http://twitter.com/#!/opus311"><span>Twitter</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://twitter.com/#!/opus311">Twitter</a></li>
                    <li id="youtube_foot"><a title="YouTube" alt="YouTube" target="_blank" rel="nofollow" href="http://www.youtube.com/user/"><span>YouTube</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://www.youtube.com/user/">YouTube</a></li>
                    <li id="flickr_foot"><a title="Flickr" alt="Flickr" target="_blank" rel="nofollow" href="http://www.flickr.com/"><span>Flickr</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://www.flickr.com/">Flickr</a></li>
                    <!--<li id="mobile"><a href="http://itunes.apple.com/gb/app/denver-311/id484143327?mt=8" rel="nofollow" target="_blank"
                        alt="Mobile" title="Mobile"><span>Mobile</span></a></li>-->
                    <li id="RSS_foot"><a title="RSS News Feed" alt="RSS News Feed" rel="nofollow" href="/DesktopModules/Orizonti_NukeNews/getRSS.aspx?pid=728&amp;tid=442244&amp;mid=504977 "><span>RSS</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="/DesktopModules/Orizonti_NukeNews/getRSS.aspx?pid=728&amp;tid=442244&amp;mid=504977">Newsfeed</a></li>
                    <li id="opendata"><a title="Open Data Catalog" alt="Open Data Catalog" rel="nofollow" href="http://opus311.com/"><span>Open Data Catalog</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://opus311.com/">Open Data Catalog</a></li>
                </ul>
            </div>
            <footer>
                <div class="col_1">
                    <h3>Stay Informed</h3>
                    <ul class="list1">
                        <li><a target="_blank" href="/connectdenver">Connect with Opus</a></li>
                        <li><a href="/emergencyalerts">Emergency Alerts</a></li>
                        <li><a href="/connectdenver">News &amp; Subscriptions</a></li>
                        <li><a href="/mayorblog">Mayor's Blog</a></li>
                        <li><a href="/connectdenver">More</a></li>
                    </ul>
                </div>
                <div class="col_2">
                    <h3>Apps &amp; Tools</h3>
                    <ul class="list1">
                        <li><a href="/connectdenver">Connect Opus App</a></li>
                        <li><a href="/apps4/311">311 Help App</a></li>
                        <li><a href="/recprograms">Recreation App</a></li>
                        <li><a href="/property">Property App</a></li>
                        <li><a href="/onlineservices">More</a></li>
                    </ul>
                </div>
                <div class="col_3">
                    <h3>Services</h3>
                    <ul class="list1">
                        <li><a href="/onlineservices">Online Services</a></li>
                        <li><a href="/livingindenver">Neighborhood Services</a></li>
                        <li><a href="/doingbusiness">Business Services</a></li>
                        <li><a href="/citygovernment">Government Services</a></li>
                        <li><a href="/atoz">More</a></li>
                    </ul>
                </div>
                <div class="col_4"><h3>Get Help</h3><div id="footer_logo"><a title="Denver 311 Help Center" href="/311" class="footer_logo"></a></div>
                </div></footer></div>
                <div class="clear"></div>
                <div class="footerbar">
                    &copy; Copyright 2014 Opus Group LLC  |  <a href="/jobs">Jobs</a> | <a href="/atoz">A to Z Services</a> | <a href="/terms">Terms of Use</a> | <a href="/privacy">Privacy &amp; Security Policy</a>
                    <a href="javascript:__doPostBack('dnn$dnnLOGIN$cmdLogin','')" class="login" id="dnn_dnnLOGIN_cmdLogin">Login</a>
                </div>
        </div>
    </div>

好吧，你的代码是相当混乱，但我可以看到在W3验证器，你有很多错误造成的非封闭元素。只要到您的页面验证结果并逐行检查检测到的所有29个问题。然后尝试你网站的CSS问题，调试，如果问题仍然存在，那么至少它会更容易隔离它。注意794行的CSS结果，您有一些非常奇怪的错误，这些错误会阻止页面快速加载，并可能导致非呈现问题。可能是一个非封闭的项目，但实际上，有很多要分析的

现在，当你有这么多的问题时，不可能找到问题是什么

很难从这里给出的代码中看出(如果你实际上有一个结束页脚标签，我建议编辑你的问题以包含它)，但从你给出的网站链接来看，看起来可能你的CSS的一部分没有正确导入。由于某些原因，Chrome似乎正在接受这些样式，但其他浏览器却没有。Chrome倾向于忽略一些编码错误来呈现一个页面，而其他页面不会。

例如，你的h3样式是从外部样式表以外的地方拉出来的。看看这些样式是从哪里来的(所谓的"app")，并尝试修复你是如何导入这些样式的

相关文章：