当我在 Firefox/IE 中测试网站页脚时，网站页脚不正常，但在 Chrome 中可以正常工作

Question

网站：http://ovi-opus2.rightnowdemo.com/app

这是页脚....如果有人对如何解决此问题有任何想法，请告诉我。 http://validator.w3.org/ 似乎检测到了一些错误，其中表示此时元素 a 上不允许使用 Attribute alt。 …el="nofollow" href="http://www.youtube.com/user/">YouTube

<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>

Answer 1

好吧，您的代码非常混乱，但就我在 W3 验证器中看到的情况而言，您有很多由非封闭元素引起的错误。只需转到your page validation results 并逐行检查检测到的所有 29 个问题。然后尝试your site's CSS issues，调试，如果问题仍然存在，那么至少隔离起来会容易得多。注意第 794 行的 CSS 结果，您有一些非常奇怪的错误，这些错误会阻止页面快速加载并可能导致非呈现问题。可能是一个非封闭的项目，但实际上，有很多要分析的

现在，当你遇到这么多问题时，不可能找到问题所在

Answer 2

很难从您在此处给出的代码中看出（如果您确实有一个结束页脚标记，我建议您编辑您的问题以包含它），但从您提供的网站链接来看，看起来有可能部分 CSS 未正确导入。出于某种原因，Chrome 似乎正在采用这些样式，但其他浏览器却没有。 Chrome 倾向于忽略一些编码错误来呈现其他页面没有的页面。

例如，您的 h3 样式是从外部样式表以外的地方提取的。查看这些样式的来源（称为“应用程序”）并尝试修复导入这些样式的方式。