html - 我的网站在 FireFox 和 Google Chrome 中看起来一样，但在 IE 中不一样

标签 html css internet-explorer google-chrome cross-browser

<分区>

我的网站在 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>

如果我找到解决方案，我会更新此线程。感谢阅读!

最佳答案

有几个问题。

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

接下来，您将对四个框重复相同的代码。这不会产生兼容性问题，但并不理想。我已将代码移至框类，因为它仅用于四个 div。

最后，如果图像包裹在 anchor 中，IE 会添加一个边框以显示它是一个链接。您可以通过将边框设置为无来通过 CSS 删除它: