如何創建適用於所有瀏覽器的css代碼？

-1

我只是寫了一個CSS程序，但是當我在Internet Explorer中的8,9版本效仿它，它並沒有正常工作，這是我的代碼：如何創建適用於所有瀏覽器的css代碼？

<html> 
    <head> 
     <style> 
      #main { 
       background-color:black; 
       width:1020px; 
       margin:0 auto; 
       padding:0; 
       overflow:hidden; 
       resize:none; 
      } 
      #s { 
       float:right; 
       background-color:red; 
       margin-right:8px; 
       margin-top:8px; 
       margin-bottom:8px; 
       width:1000px; 
       height:290px; 
       overflow:hidden; 
       border:2px solid yellow; 
      } 
      #k { 
       float:right; 
       background-color:green; 
       margin-bottom:8px; 
       margin-right:8px; 
       width:500; 
       height:300; 
       overflow:hidden; 
       border:2px solid yellow; 
      } 
      #v { 
       background-color:grey; 
       margin-right:10px; 
       float:right; 
       width:486; 
       height:143; 
       overflow:hidden; 
       border:2px solid yellow; 
      } 
      #d { 
       background-color:blue; 
       margin-right:10px; 
       margin-bottom:10px; 
       float:right; 
       width:486; 
       height:143; 
       overflow:hidden; 
       border:2px solid yellow; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <div id="s">salam</div> 
      <div id="k">one</div> 
      <div id="d">two</div> 
      <div id="v">three</div> 
     </div> 
    </body> 
</html>

這是我的代碼，但當我在IE瀏覽器中模擬它時，在8版本中，它的工作原理錯了，我該如何修復此代碼才能在IE和其他瀏覽器的所有版本中正常工作？我的問題在哪裏？在所有瀏覽器中，我的CSS佈局位於頁面中心，但在IE8,9中，我的佈局位於頁面的左側，我認爲主佈局的邊距，當我添加此「」並使用IE模擬它時佈局更改錯誤

來源

2014-09-05 zandkazem

定義「工作不正常」和「工作錯誤」。究竟是什麼問題？越詳細，越好。 – ajp15243 2014-09-05 15:28:56

@ ajp15243除了IE 8,9之外的所有瀏覽器中，我的佈局整體位於頁面中心，但在IE 8,9中位於頁面左側 – zandkazem 2014-09-05 15:30:21

['resize']（https：// developer .mozilla.org/en-US/docs/Web/CSS/resize）IE中不支持CSS屬性（在'＃main'上使用）。嘗試刪除，看看是否修復它。正如@MiniRagnarok所說的，還要添加一個'<！DOCTYPE html>'。這可能是你的問題。 – ajp15243 2014-09-05 15:32:03

首先，添加<!DOCTYPE>到您的代碼：<!DOCTYPE html>

當你添加<!DOCTYPE>代碼停止對所有的瀏覽器工作，因爲小的原因，你人失蹤width後提「px」其他3盒。

下面是更新後的代碼：

<!DOCTYPE html> 
<html> 
<head> 

    <style> 
     html, body { 
      height: 100%; 
      margin: 0 auto; 
      padding: 0; 
      width: 1020px; 
     } 

     #main { 
      background-color: black; 
      width: 100%; 
      height: 100%; /*Remove this if you dont want the Black box to be 100% height*/ 
      overflow: hidden; 
     } 

     #s { 
      float: right; 
      background-color: red; 
      margin-right: 8px; 
      margin-top: 8px; 
      margin-bottom: 8px; 
      width: 1000px; 
      height: 290px; 
      overflow: hidden; 
      border: 2px solid yellow; 
     } 

     #k { 
      float: right; 
      background-color: green; 
      margin-bottom: 8px; 
      margin-right: 8px; 
      width: 500px; 
      height: 300px; 
      overflow: hidden; 
      border: 2px solid yellow; 
     } 

     #v { 
      background-color: grey; 
      margin-right: 10px; 
      float: right; 
      width: 486px; 
      height: 143px; 
      overflow: hidden; 
      border: 2px solid yellow; 
     } 

     #d { 
      background-color: blue; 
      margin-right: 10px; 
      margin-bottom: 10px; 
      float: right; 
      width: 486px; 
      height: 143px; 
      overflow: hidden; 
      border: 2px solid yellow; 
     } 
    </style> 
</head> 
<body> 
    <div id="main"> 
     <div id="s">salam</div> 
     <div id="k">one</div> 
     <div id="d">two</div> 
     <div id="v">three</div> 
    </div> 
</body> 
</html>

希望這將幫助！

讓我知道你是否仍然有問題！

來源

2014-09-05 15:45:52 UID

錯過了'px'的好消息。 – ajp15243 2014-09-05 15:47:42

@UID感謝男人 – zandkazem 2014-09-05 15:47:47

它的女人！ :-) – UID 2014-09-05 15:48:52

如何創建適用於所有瀏覽器的css代碼？

回答

相關問題