HTML问题,仅适用于Webkit

时间:2010-02-07 13:30:38

标签: html firefox html5

这在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 个答案:

答案 0 :(得分:4)

基本上,您使用的主要是HTML5特定元素,并且它们在任何地方都不受支持,特别是IE8中列出的那些元素。

快速查看Here's the list of elements added in HTML5

答案 1 :(得分:2)

尝试使用FirebugIE developer toolbar等调试工具来确定错误放置哪些元素以及原因。

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

答案 2 :(得分:0)

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

关于IE中HTML5和CSS3支持的更一般性文章(例如,您的角落不是四舍五入的)this article。对于所有主流浏览器(也在Opera中)的圆角,请阅读this one。在HTML5和CSS3的所有主流浏览器中也存在general tables支持。

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