Question

我有一个使用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>

Answer 1

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

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

Answer 2

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

Answer 3

您使用的是哪个版本的IE？ IE不支持html5，并且你使用的html5标签不起作用。你需要用div替换它们并用css

相应地设置它们

Internet Explorer未加载样式表

3 个答案: