Internet Explorer не загружает таблицу стилей - PullRequest
Новая
       2

Internet Explorer не загружает таблицу стилей

0 голосов
/ 16 января 2011

У меня есть страница, которая использует 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 source 

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

Ответы [ 3 ]

3 голосов
/ 16 января 2011

Вы используете всевозможные теги HTML 5, которые не будут работать с большинством современных браузеров ... а именно: nav, aside и footer;замените их на div и их свойства CSS, и все будет в порядке.У вас также есть тег привязки с элементами списка внутри него!

Я бы посоветовал запустить его через W3C validator , чтобы очистить недействительную пометку.

2 голосов
/ 16 января 2011

Или, если вы не возражаете против использования JavaScript, просто вставьте HTML5 в заголовок вашей страницы: http://remysharp.com/2009/01/07/html5-enabling-script/. Я бы порекомендовал придерживаться html5, если это возможно.

1 голос
/ 16 января 2011

Какую версию IE вы используете? IE не поддерживает HTML5, и вы используете теги HTML5, которые не будут работать. Вам нужно заменить их на div и стилизовать их соответственно css

...