HTML 问题，仅适用于 Webkit答案

【问题标题】：HTML problem, only works in WebkitHTML 问题，仅适用于 Webkit
【发布时间】：2010-02-09 09:49:04
【问题描述】：

这在 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

提前感谢您的帮助:)

【问题讨论】：

标签： firefox html

【解决方案1】：

基本上，您使用的主要是 HTML5 特定元素，但它们尚未在所有地方都得到适当支持，尤其是您列出的 IE8。

如需快速浏览，请Here's the list of elements added in HTML5。

【讨论】：

好吧，基本上发生的事情是我认为浏览器会支持知道像
和
这样的东西是块元素。我通过添加 display: block; 来修复它。到所有 HTML 元素 :)
+1 不错。就个人而言，我认为这应该是“答案”，您实际上发现了问题所在，我只是建议了一些可以提供帮助的常用工具。
@simon - 干杯 :) 只要约翰尼能起床并继续前进就是最重要的！

【解决方案2】：

尝试使用诸如Firebug 或IE developer toolbar 之类的调试工具来找出错误放置的元素以及原因。

两者都可以让您将鼠标悬停在块上并突出显示相应的 HTML。您将能够准确地看到错误放置的元素，并查看 CSS 以尝试找出原因。

【讨论】：

【解决方案3】：

Johnny，您的解决方案是否也修复了 Firefox 2 和 Camino 1 中的错误渲染？有趣，因为我只知道 Javascript 解决方案。只是为了给您更多反馈：要了解有关在所有主要浏览器中正确呈现 HTML5 的更多信息，请阅读 Nico Hagenburger 的this article。也可以使用this script在IE中渲染HTML5。

this article 中有关 IE 中的 HTML5 和 CSS3 支持的更一般性文章（例如，您的角不是圆角的）。有关所有主要浏览器（也在 Opera 中）的圆角，请阅读this one。还有general tables关于所有主流浏览器对HTML5和CSS3的支持。

编辑：我刚刚阅读了一篇关于从 IE 中打印时 HTML5 页面未正确呈现的文章，因为在打印页面时未加载 this JavaScript solution。有关doctype.com 的更多信息。

【讨论】：