2012-10-25 89 views
-1

我已經在css3中將段落標籤對齊到左側和旁邊標籤。它是在谷歌瀏覽器中工作的 。但它不工作在Firefox和 Internet Explorer。有人告訴爲什麼不工作。 這裏HTML5代碼Css3是不是在firefox中工作,ie.it工作在谷歌鉻合金

<!DOCTYPE html > 
<html lang="en"> 
<head> 
<meta charset="urf-8" /> 
<title>Bruno Website </title> 
<link rel="stylesheet" href="main.css" > 
</head> 

<body> 
    <div id=big_wrapper> 
    <header id="top_header"> 
     <h1> Welcome to HTML5 </h1> 
    </header> 

    <nav id="top_menu"> 
     <ul> 
      <li>Home</li> 
      <li>Services</li> 
      <li>Tutorials</li> 
      <li>Conatct</li>   
     </ul> 
    </nav> 

    <div id="new_div"> 
    <section id="main_section"> 
     <article> 
      <header> 
       <hgroup> 
       <h1>Tiltle of the article</h1> 
       <h2>titile h2 </h2> 
       </hgroup> 
      </header> 
       <p>This is my First Website in hTml5 </p> 
      <footer> 
       <p>~BRuno thileeban</p> 
      </footer> 
     </article> 
     <article> 
      <header> 
       <hgroup> 
       <h1>Tiltle of the article2</h1> 
       <h2>titile h2 2 </h2> 
       </hgroup> 
      </header> 
       <p>This is my First Website in hTml5 2 </p> 
      <footer> 
       <p>~BRuno thileeban</p> 
      </footer> 
     </article> 
    </section> 
     <aside id="side_news"> 
      <h4>News</h4> 
      HEllo we r doing good job 
     </aside> 
    </div> 
    <footer id="the_footer"> 
    Copyright Bruno ..... 
    </footer> 

    </div> 
</body> 

</html> 

這裏是CSS3代碼

* 
{ 
margin:0px; 
padding:0px; 
} 
h1 
{ 
font: bold 20px Tahoma; 
} 
h2 
{ 
font: bold 14px Tahoma; 
} 
header, section, footer, aside, nav, article, hgroup{ display:block;} 
body 
{ 
width:100%; 
display:-webkit-box; 
-webkit-box-pack: center; 
} 
#big_wrapper{ 
max-width: 1000px; 
margin:20px 0px; 
display:-webkit-box; 
-webkit-box-orient: vertical; 
-webkit-box-flex:1; 
} 
#top_header { background:yellow; 
border:3px solid black; 
padding:20px; 
} 
#top_menu{ border:red; 
background:blue; 
color:white; 
} 
#top_menu li { 
display:inline-block; 
list-style:none; 
padding:5px; 
font:bold 14px tahoma; 
} 
#new_div{ 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    } 
    #main_section 
    { 
    border:1px solid blue; 
    -webkit-box-flex:1; 
    margin:20px ; 
    padding:20px; 

    } 

    #side_news{ 
    border:1px solid red; 
    margin:20px 0px; 
    padding:30px; 
    background: #66CCCC; 

    } 
    #the_footer{ 
    text-align:center; 

    padding:20px; 
    border-top:2px solid green; 
    } 
    article{ background:#FFFBCC; border:1px solid red; padding:20px; margin-bottom:15px;} 
    article footer{ text-align:right;} 

回答

1

您已選擇僅在代碼中支持webkit(Google Chrome基於此)。要支持其他瀏覽器使用的渲染引擎,您需要進行一些更改。

無處不在,你使用-webkit-*,複製線及以下使用-moz-*,再次-o-*-ms-*,再一次沒有任何前綴。網絡瀏覽器會刪除它不理解的。

例如,-webkit-box-flex:1;成爲

-webkit-box-flex:1; /* chrome, safari, etc */ 
-moz-box-flex:1; /* Firefox, seamonkey etc */ 
-o-box-flex:1;  /* Opera */ 
-ms-box-flex:1;  /* MSIE */ 
box-flex:1;   /* Any that support full implementation */ 

然而,應該指出的是this is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.您可能感興趣的使用flex代替

0

你已經在你的CSS使用的幾個-webkit前綴(例如:-webkit-box-orient: vertical;)。這些規範僅適用於某些瀏覽器,特別是Chrome。

標準的CSS前綴,如float將是一個更好的選擇。

PS - 沒有像urf-8這樣的字符集。

0

你好像只使用了-webkit前綴,這是特定的基於WebKit的瀏覽器如Safari和Chrome,要麼使用其他前綴(-moz-o),或使用Compass,這對於保持前綴非常有用,因爲代碼總是反映最新的瀏覽器支持。

0

供應商前綴,顧名思義,只應該在一個單一的工作供應商的瀏覽器,因爲它們表明自定義規則或者尚未標準化的事物的實驗性實現(儘管這方面存在一些爭議)。

-webkit-位是供應商前綴,僅適用於使用WebKit rendering engine的瀏覽器,其中最流行的是Chrome和Safari。其他渲染引擎爲Here is a list of known vendor prefixes。所以,如果你把這個規則:

body { 
    width:100%; 
    display: -webkit-box; 
    -webkit-box-pack: center; 
} 

你有什麼是不是真的CSS3,但WebKit的自定義CSS。CSS3,如果規則和你使用獲得批准應該是這樣的性質(不要使用此代碼):

body { 
    width: 100%; 
    display: box; 
    box-pack: center; 
} 

此規則將不會在瀏覽器中運行,直到boxbox-pack標準同意並最終確定,以獲得最大的當前支持的規則將有看起來像這樣(再次,不要使用此代碼):

body { 
    width:100%; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-box; 
    display: -o-box; 
    display: box; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-box-pack: center; 
    -o-box-pack: center; 
    box-pack: center; 
} 

這種複雜性就是爲什麼人們使用像Compass工具來生成自己的stylesh的EET。

但是,我一直在說,你不應該使用這段代碼,原因是不再有任何計劃在CSS3中有boxbox-pack。它們已被新方法using the flex keyword所取代。雖然flex取代box他們不以相同的方式工作,所以它不是直接翻譯。對供應商前綴box屬性的支持將淡出或返回到自定義CSS(整個box方法始於Firefox自定義CSS,用於在瀏覽器工具欄中佈局UI元素,即不適用於網頁)。

這是您使用供應商前綴CSS規則運行的風險 - 行爲甚至語法都可能發生變化。如果您打算使用它們,您必須保持在the spec之上,並仔細監控瀏覽器中實驗實施的進度。

相關問題