1

我正在尝试创建一个像这样的网站http://www.spookycraft.net/每当我在 IE 中运行我的网站时，它看起来很糟糕，所有的东西都被推到左边，所有的图像都是分开的，在 Chrome 和 firefox 中的 Tho他们看起来很完美（因为所有的中心和过渡都在那里）这是小提琴 http://jsfiddle.net/EuJE/

这是测试站点：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>

如果我找到答案，任何帮助将不胜感激，我一定会更新这篇文章，感谢您的阅读。

4

1 回答 1

1

你用的是什么版本的IE？您的页面在 IE10 上看起来不错。如果您运行的是旧版本，我无法帮助您，但请看一下： 模仿 IE 中的 CSS3 过渡？

-webkit-transition不能在 IE 上运行。

于 2013-06-29T00:06:56.793 回答