css - Internet Explorer 不加载样式表

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

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

最佳答案

您正在使用各种 HTML 5 标签,这些标签不适用于大多数现代浏览器……即:nav、aside 和 footer;将它们替换为 div 及其 CSS 属性,您应该没问题。您还有一个包含列表项的 anchor 标记!

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

关于css - Internet Explorer 不加载样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4706264/

相关文章:

ruby-on-rails - 尝试安装 pg gem 时找不到 'libpq-fe.h header

javascript - 在 jquery 中折叠展开

css - Bootstrap 导航菜单在 IE/Edge 中有换行符

html - Opera12 和 IE9 中的 rem 单位不准确

javascript - 无法使用事件监听器阻止按键

ruby-on-rails-3 - 无法识别 lib 目录中引入的新验证器类并抛出错误

ruby-on-rails - 在 current_password 字段中设计更改验证消息

html - 将左侧放置的跨度的 CSS 更改为 input[type=checkbox]

html - 图像和字体菜单垂直对齐

Jquery addClass 函数在 Firefox 中不起作用