javascript - 当我在 firefox/IE 中测试网站页脚时，网站页脚不正常，但在 Chrome 中工作正常

Question

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

这是页脚....如果有人对如何解决此问题有任何想法，请告诉我。 http://validator.w3.org/ 似乎检测到了一些错误它说此时元素 a 不允许属性 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 结果，您有一些非常奇怪的错误，这些错误会阻止页面快速加载并可能导致非渲染问题。可能是一个未关闭的元素，但实际上，有很多要分析

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