HTML問題，只適用於Webkit

這在Webkit中運行良好，但當我去Firefox（或IE8）時，它完全搞砸了。我一直盯着這個這麼長時間，以至於我根本找不到任何錯誤，所以也許你們中的一個人可以指出我哪裏會出錯。HTML問題，只適用於Webkit

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

感謝您的幫助提前:)

來源

2010-02-07 Johnny

嘗試使用像Firebug或IE developer toolbar調試工具來找出哪些元素被放在錯誤和原因。

兩者都可以將鼠標懸停在塊上並突出顯示相應的HTML。您將能夠確切地看到錯誤地放置了哪個元素，並查看CSS以嘗試找出原因。

來源

2010-02-07 13:36:30

基本上，您主要使用的是HTML5特定元素，並且它們在任何地方都不被正確支持，特別是IE8超出了您列出的範圍。

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

來源

2010-02-07 13:42:11

好的，基本上發生了什麼是我認爲瀏覽器會有支持，知道像

和

這樣的東西是塊元素。我通過添加display：block來修復它。到所有的HTML元素:) – Johnny 2010-02-07 13:53:40

+1不錯的一個。就我個人而言，我認爲這應該是「答案」，你確實發現了問題所在，我只是提出了一些可以提供幫助的常用工具。 – 2010-02-08 09:41:56

@simon - 乾杯:)只要約翰尼的起起落落都是重要的！ – 2010-02-08 11:58:41

Johnny，您的解決方案是否也解決了Firefox 2和Camino 1中不正確的渲染問題？有趣的是，我只知道Javascript解決方案。只是爲了向您提供更多的反饋意見：要了解更多有關在所有主流瀏覽器中正確呈現HTML5的信息，請閱讀Nico Hagenburger的this article。您還可以使用this script在IE中呈現HTML5。

在this article中提供了一個關於HTML中的HTML5和CSS3支持的更一般的文章（例如，您的角點未被舍入）。對於所有主流瀏覽器（也在Opera中）的圓角，請閱讀this one。關於支持HTML5和CSS3的所有主流瀏覽器，還有general tables。

編輯：我剛剛看了一下從內IE打印時不能正確渲染HTML5頁的文章，因爲在打印頁面時this JavaScript solution沒有加載。有關doctype.com的更多信息。

來源

2010-02-08 21:37:37

HTML問題，只適用於Webkit

回答

相關問題