Internet Explorer的定位问题（基本CSS）

Question

I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle http://jsfiddle.net/EuRJE/ 我正在尝试创建一个像http://www.spookycraft.net/这样的网站，每当我在IE中运行我的网站时，它看起来都糟透了，所有内容都被推到了左边，所有图像都分开了，Chrome和Firefox中的Tho它们看起来很完美（因为居中，过渡就在那里），这里是小提琴http://jsfiddle.net/EuRJE/

Here's the testing site: http://www.wandernetwork.com/ and here's the code: also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated. 这里是测试站点： 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>

Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading. 如果我找到答案，我将确保更新此帖子，对您的帮助将不胜感激，谢谢阅读。

Answer 1

What version of IE are you using? 您正在使用哪个版本的IE？ Your page looks fine on IE10. 您的页面在IE10上看起来不错。 I can't help you if you are running an older version, but have a look at this : Imitate CSS3 transition in IE? 如果您运行的是较旧的版本，我无能为力，但是请看一下：模仿IE中的CSS3过渡吗？

-webkit-transition won't work on IE. -webkit-transition在IE上不起作用。

Internet Explorer的定位问题（基本CSS）

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-29 00:06:56

Internet Explorer的定位问题（基本CSS）

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-29 00:06:56

解决方案1
1 已采纳 2013-06-29 00:06:56