这在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">
</section>
<section id="share">
</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 »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</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
感谢您提前提供任何帮助:)
答案 0 :(得分:4)
基本上,您使用的主要是HTML5特定元素,并且它们在任何地方都不受支持,特别是IE8中列出的那些元素。
答案 1 :(得分:2)
尝试使用Firebug或IE 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的更多信息。