Internet Explorer 未加载样式表答案

【问题标题】：Internet Explorer not loading stylesheetInternet Explorer 未加载样式表
【发布时间】：2011-01-16 15:42:27
【问题描述】：

我有一个使用 CSS 的页面。我在 Firefox 中工作正常，但在 IE 中打开时似乎没有样式。

<!DOCTYPE html>
<html>
    <head>
        <title>MySite</title>
        <%= stylesheet_link_tag :all %>
        <%= javascript_include_tag :defaults %>
        <%= csrf_meta_tag %>
    </head>
    <body>
        <p>
            <nav>
                <ul>
                    <li>
                        <a href="#">Login</a>
                    </li>
                    <li>
                        <a href="#">Blog</a>
                    </li>
                    <li>
                        <a href="#">Contact Us </a>
                    </li>
                    <li>
                        <a href="#">Help</a>
                    </li>
                    <li>
                        <a href="#">Trends</a>
                    </li>
                    <li>
                        <a href="#">Your Privacy!</a>
                    </li>
                    <li>
                        <a href="#">Terms of Use</a>
                    </li>
                    <li>
                        <a href="#">mySite.com</a>
                    </li>
                </ul>
            </nav>
        </p>
        <%= yield %>
    </body>
    <aside style ="float:right; font-size:x-small;background:#ffffff;">
        <center>
            Local Areas
        </center>
        <% @states.each do |state| %>
        <ul>
            <a href= "/states">
                <li>
                    <%= state.name %>
                </li>
            </a>
        </ul>
        <% end %>
    </aside>
    <footer>
    </footer>
</html>

IE源码

<!DOCTYPE html>
<html>
    <head>
        <title>MySite</title>
        <link href="/stylesheets/scaffold.css?1295095254" media="screen" rel="stylesheet" type="text/css" />
        <script src="/javascripts/prototype.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/effects.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/controls.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/rails.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/application.js?1294724842" type="text/javascript"></script>
        <meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="u33vgyzezXE8932GvLEjMtZNNAbB2FJOSmYQCnM4/OE="/>
    </head>
    <body>
        <p>
            <nav>
                <ul>
                    <li>
                        <a href="#">Login</a>
                    </li>
                    <li>
                        <a href="#">Blog</a>
                    </li>
                    <li>
                        <a href="#">Contact Us </a>
                    </li>
                    <li>
                        <a href="#">Help</a>
                    </li>
                    <li>
                        <a href="#">Trends</a>
                    </li>
                    <li>
                        <a href="#">Your Privacy!</a>
                    </li>
                    <li>
                        <a href="#">Terms of Use</a>
                    </li>
                    <li>
                        <a href="#">mySite.com</a>
                    </li>
                </ul>
            </nav>
        </p>

    </body>
    <aside style ="float:right; font-size:x-small;background:#ffffff;">
        <center>
            Local Areas
        </center>
        <ul>
            <a href= "/states">
                <li>
                    Texas
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Mississippi
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Alabama
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Alaska
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Arizona
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    California
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Colorado
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Connecticut
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Delaware
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Florida
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Georgia
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Hawaii
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Idaho
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Illinois
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Indiana
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Iowa
                </li>
            </a>
        </ul>
        <ul>
            <a href= "/states">
                <li>
                    Kansas
                </li>
            </a>
        </ul>
    </aside>
    <footer>
    </footer>
</html>

【问题讨论】：

能否介绍一下IE“查看源码”显示的代码？
什么 CSS 没有应用？你有什么 HTML（显示 HTML，而不是你给 Ruby 的模板）。

标签： css internet-explorer ruby-on-rails-3 stylesheet

【解决方案1】：

您正在使用大多数现代浏览器都无法使用的各种 HTML 5 标签...即：nav、aside 和 footer；用 div 和它们的 CSS 属性替换它们，你应该没问题。您还有一个带有列表项的锚标记！

我的建议是通过 W3C validator 运行它以清除无效标记。

【讨论】：

【解决方案2】：

或者，如果您不介意使用 JavaScript，只需将 HTML5 shiv 放入页面头部：http://remysharp.com/2009/01/07/html5-enabling-script/。如果可能的话，我会建议坚持使用 html5。

【讨论】：

【解决方案3】：

您使用的是哪个版本的 IE？ IE 不支持 html5，并且您使用的 html5 标记不起作用。您需要用 div 替换它们并使用 css 相应地设置它们

【讨论】：