Проблема HTML, работает только в Webkit - PullRequest
Новая
       12

Проблема HTML, работает только в Webkit

0 голосов
/ 07 февраля 2010

Это прекрасно работает в Webkit, но когда я перехожу на Firefox (или IE8), он полностью испортился. Я так долго смотрел на это, что даже не могу найти никаких ошибок, поэтому, возможно, один из вас, ребята, сможет указать, где я ошибаюсь.

CSS: 

body {
    font-family: Georgia, serif;
    margin: 0px;
    padding: 0px;
    background: #222;
}


header {
    background: #fff url('images/header-border.gif') bottom repeat-x;
    width: 980px;
    margin: 0px auto;
    height: 100px;
    padding: 0px 0px 0px 20px;
    -moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px; 
    -webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; 
    border-top-right-radius: 4px; border-top-left-radius: 4px;
}


section {   
}


article {


}


footer {
    clear: left;
}

nav {
    width: 980px;
    margin: 0px auto;
    height: 70px;
    padding: 10px 0px 10px 0px;
    font-size: 21px;
    font-weight: bold;
    font-family: Arial, serif;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #060606;
}

#content {
    width: 980px;
    background: #fff;
    padding: 0px 0px 0px 20px;
    margin: 0px auto;
}

nav ul li {
    float: left;
    list-style: none;
    width: 155px;
}

#left-column, #logo {
    width: 560px;
    margin: 0px auto;
    float: left;
}

#right-column, #share {
    width: 380px;
    margin: 0px auto;
    float: left;
    height: 100%;
    padding: 0px 0px 0px 20px;
    border-left: 1px solid #d9d9d9;
}

address {
    display: inline;
}

a img {
    border: 0px;
}

.clear-left {
    clear: left;
}

И HTML: 

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="text/html; charset=UTF-8" />

<title>Webtint </title>

<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />

<link rel="pingback" href="http://localhost/xmlrpc.php" />

</head>
<body>

<nav>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></a></li>
        <li><a href="#">resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></a></li>
        <li><a href="#">articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></a></li>
        <li><a href="#">contact</a></li>

        <li><a href="#">follow us</a></li> 
    </ul>
</nav>


<header>

    <section id="logo">
        &nbsp;
    </section>

    <section id="share">
        &nbsp;
    </section>

</header>
<div id="content">

    <section id="left-column">  
        <article>
            <h2>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                        <?php the_title(); ?>
                </a>
            </h2>
            <time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
            <?php the_excerpt(); ?>
            <br /><br />
        <a href="<?php the_permalink(); ?>">Read More</a> 
        <?php comments_popup_link(
        '<span class="boxed">No Responses &#187;</span>', 
        '<span class="boxed"> 1 Response &#187;</span>',
        '<span class="boxed">% Responses &#187;</span>'); ?>
    </article>
    <hr />
    </section>


    <section id="right-column">

             <h2>Popular Posts</h2>

    </section>  


</div>
<footer>

</footer>

</body>
</html>

Снимок экрана в Firefox: http://imgur.com/wvhI0.gif

Снимок экрана в Chrome: (как это должно выглядеть) http://imgur.com/sQK8S.gif

Снимок экрана в IE8: http://imgur.com/7OnEJ.gif

Спасибо за любую помощь заранее:)

Ответы [ 3 ]

4 голосов
/ 07 февраля 2010

По сути, вы используете в основном элементы, специфичные для HTML5, и они пока не поддерживаются должным образом, особенно в IE8 из перечисленных вами.

Для быстрого просмотра Вот список элементов, добавленных в HTML5 .

2 голосов
/ 07 февраля 2010

Попробуйте использовать инструмент отладки, например Firebug или панель инструментов разработчика IE , чтобы выяснить, какие элементы размещены неправильно и почему.

Оба позволяют навести указатель мыши на блоки и подсвечивают соответствующий HTML. Вы сможете точно определить, какой именно элемент размещен неправильно, и просмотреть CSS, чтобы попытаться выяснить, почему.

0 голосов
/ 09 февраля 2010

Джонни, ваше решение также исправляет неправильный рендеринг в Firefox 2 и Camino 1? Интересно, как я знаю только о решении Javascript. Просто чтобы дать вам больше отзывов об этом: чтобы узнать больше о правильной визуализации HTML5 во всех основных браузерах, прочитайте эту статью от Nico Hagenburger. Вы также можете использовать этот скрипт для рендеринга HTML5 в IE.

Более общая статья о поддержке HTML5 и CSS3 в IE (например, ваши углы не скруглены) в этой статье . Для закругленных углов во всех основных браузерах (также в Opera), пожалуйста, прочитайте этот . Также существуют общие таблицы о поддержке во всех основных браузерах HTML5 и CSS3.

РЕДАКТИРОВАТЬ: я только что прочитал статью о HTML5-страницах, которые неправильно отображаются при печати из IE, потому что это решение JavaScript не загружается при печати страницы. Больше информации на doctype.com .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...