Question

我的网站在Firefox，Safari和Google Chrome看起来很棒，但IE却很糟糕。它没有正确定位。这是我的代码和Fiddle

代码：

    .container{
        overflow:hidden;
        width:620px;
        margin:0px auto;
    }

    .box{
        width:300px;
        height:300px;
        float:left;
        background-color:#ccc;
        margin-bottom:20px;
        margin-top:20px;
        border:1px solid black;
        padding:0px;
    }
    .spacing{
    margin-right: 2px;
    margin-left: 2px;
    }
    .banner{
     margin:0 auto;
    display:block;
    border:4px solid black;
    padding:0px;
    }

     #one{
     opacity: 0.5;
        filter: alpha(opacity=50);
        -webkit-transition: opacity 1s linear;
     }

     #one:hover{
    opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transition: opacity 1s linear;
    }  

    #two{
    opacity: 0.5;
        filter: alpha(opacity=50);
        -webkit-transition: opacity 1s linear;
        }

        #two:hover{
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transition: opacity 1s linear;
        }

        #three{
        opacity: 0.5;
        filter: alpha(opacity=50);
        -webkit-transition: opacity 1s linear;
        }

        #three:hover{
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transition: opacity 1s linear;

        }

        #four{
        opacity: 0.5;
        filter: alpha(opacity=50);
        -webkit-transition: opacity 1s linear;
        }

       #four:hover{
       opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transition: opacity 1s linear;
       }

    </style>
    </head>

    <body>

    <img src="http://i.imgur.com/y9T3TJq.jpg" class="banner">

    <div class="container">

        <div class="box spacing" id="one"><a href="http://www.reddit.com">
        <img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png" width="300px" height="300px"></a></div>
            <div class="box spacing"id="two"><a href="http://www.reddit.com">
            <img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png" width="300px" height="300px"></a></div>

                <div class="box spacing"id="three"><a href="http://www.reddit.com">
                <img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png" width="300px" height="300px"></a></div>
                    <div class="box spacing"id="four"><a href="http://www.reddit.com">
                    <img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png"  width="300px" height="300px"></a></div>
    </div>

    </body>

    </html>

如果找到解决方案，我会更新此帖子。谢谢你的阅读！

Answer 1

有一些问题。

首先，您只在使用webkit前缀时向WebKit浏览器提供转换。您需要Firefox，Opera和IE的无前缀版本。我还为需要它的版本添加了-moz-前缀。

接下来，您将继续为四个框重复相同的代码。这不会产生兼容性问题，但并不理想。我已经将代码移到了box类，因为它只用在四个div上。

最后，如果图像被包装在锚中，IE会添加边框以显示它是一个链接。您可以通过将边框设置为none来删除它：

a img {
   border: none;
}

查看http://jsfiddle.net/an5jS/7/

上的演示

Answer 2

取自this，尝试使用：

.container{
    overflow:hidden;
    width:620px;
    text-align: center; /* instead of margin: 0px auto; */
}

Answer 3

在Internet Explorer中，任何带有超链接的图像都会有蓝色边框...只需在img标记内添加border =“0”即可。示例如下：

<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png" border="0" width="300px" height="300px">

我的网站在FireFox和谷歌浏览器中看起来相同，但不是IE

3 个答案: