與Internet Explorer（基本的CSS）定位問題

我試圖創建一個這樣的網站這樣的網站，當我在IE中運行我的網站它看起來很可怕一切都推到左側，所有的圖像是分開的，在Chrome和Firefox他們看起來完美的（如在所有的中心和過渡是存在的），這裏的小提琴 http://jsfiddle.net/EuRJE/與Internet Explorer（基本的CSS）定位問題

這裏的測試場地：http://www.wandernetwork.com/ 和下面的代碼：也記住我有點新手，所以如果你有任何指針我或其他技巧，他們將不勝感激。

<head> 
    <meta charset='UTF-8'> 
    <title>Wandercraft Network</title> 
    <style media="screen" type="text/css"> 
     #page-wrap { 
      width:620px; 
      margin:0px auto; 
     } 
     .slide-up-boxes a { 
      display:block; 
      width:300px; 
      height:300px; 
      background: #eee; 
      overflow:hidden; 
     } 
     .slide-up-boxes h5 { 
      height:300px; 
      width:300px; 
      text-align:center; 
      line-height:150px; 
      -webkit-transition: margin-top 0.3s linear; 
      background-color:#white; 
     } 
     .slide-up-boxes a:hover h5 { 
      margin-top:-300px; 
     } 
     .slide-up-boxes div { 
      text-align:center; 
      height:300px; 
      width:300px; 
      opacity:0; 
      background-color:orange; 
      -webkit-transform: rotate(6deg); 
      -webkit-transition: all 0.2s linear; 
     } 
     .slide-up-boxes a:hover div { 
      -webkit-transform: rotate(0); 
      opacity:1; 
     } 
     .slide-up-boxes { 
      margin:5px; 
      width:300px; 
      float:left; 
     } 
     .banner { 
      margin:0px auto; 
      display:block; 
      padding:15px; 
      width:1000px; 
      height:300px; 
     } 
     /* Limit the width of the tray to 30px to make it stack vertically*/ 
     #enjin-tray { 
      max-width: 30px; 
      margin: 0; 
      bottom: 175px; 
     } 
     #enjin-tray li#notificationpanel { 
      border-radius: 3px; 
     } 
     #enjin-tray ul li.tray-item { 
      border-style: solid; 
      border-width: 1px; 
     } 
     #notificationpanel .notification-icon.apps { 
      background-position: -84px 3px; 
     } 
     #notificationpanel .notification-icon.general { 
      background-position: -54px 3px; 
     } 
     #notificationpanel .notification-icon.messages { 
      background-position: -25px 3px; 
     } 
     #notificationpanel .notification-icon.dashboard { 
      display: none; 
     } 
     #enjin-tray li#notificationpanel .subpanel { 
      width: 380px; 
      bottom: 0; 
     } 
     #enjin-tray #notificationpanel .subpanel.general { 
      right: 40px; 
     } 
     #enjin-tray #notificationpanel .subpanel.messages { 
      right: 40px; 
     } 
     #enjin-tray .subpanel { 
      right: 40px; 
     } 
     #enjin-tray #notificationpanel .subpanel.apps .faux-icon { 
      display: none; 
     } 
     #enjin-tray #notificationpanel .subpanel.general .faux-icon { 
      display: none; 
     } 
     #enjin-tray #notificationpanel .subpanel.messages .faux-icon { 
      display: none; 
     } 
     #messages-notification-tip { 
      bottom: 231px !important; 
      right: 35px !important; 
     } 
     #general-notification-tip { 
      bottom: 205px !important; 
      right: 35px !important; 
     } 
     #apps-notification-tip { 
      bottom: 180px !important; 
      right: 35px !important; 
     } 
     .triangle { 
      display: none; 
     } 
     #enjin-tray-messaging { 
      display: none; 
     } 
    </style> 
</head> 

<body> 
    <img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner"> 
    <div id="page-wrap"> 
     <section class="slide-up-boxes"> <a href="www.reddit.com"> 
    <img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png"> 
    <div> 
    <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
    </div> 
    </a> 

     </section> 
     <section class="slide-up-boxes"> <a href="www.reddit.com"> 
    <img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png"> 
    <div> 
    <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
    </div> 
    </a> 

     </section> 
     <section class="slide-up-boxes"> <a href="www.reddit.com"> 
    <img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png"> 
    <div> 
    <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
    </div> 
    </a> 

     </section> 
     <section class="slide-up-boxes"> <a href="www.reddit.com"> 
     <img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png"> 
     <div> 
     <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
     </div> 
     </a> 

     </section> 
     <div style="clear:both;"></div> 
    </div> 
</body>

，如果我找到答案，我一定會更新這個帖子任何幫助，將不勝感激，謝謝您的閱讀。

來源

2013-06-29 user2426889

什麼版本的IE？ – chovy

歡迎來到網絡開發世界，在那裏IE遇到你作爲噩夢 – Ron

可以確認它是在IE8的烤麪包 –

您使用的是什麼版本的IE？您的網頁在IE10上看起來很好。我不能幫你，如果你運行的是舊版本，但看看這個： Imitate CSS3 transition in IE?

-webkit-transition將無法在IE瀏覽器。

來源

2013-06-29 00:06:56 Pascamel

我知道我正在優化它的鉻和Firefox，是的在IE8它是可怕的，但在IE10這很好所以我不會擔心它，謝謝你的時間閱讀我的文章，並寫一個答案。 – user2426889

與Internet Explorer（基本的CSS）定位問題

回答

相關問題