-1

Firefox我的网站在、Safari和中看起来很棒Google Chrome，但在IE. 它没有正确定位。这是我的代码和小提琴

代码： 

    .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>

如果我找到解决方案，我会更新这个线程。感谢您的阅读！

4

3 回答 3

2

有几个问题。

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

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

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

a img {
   border: none;
}

请参阅http://jsfiddle.net/an5jS/7/上的演示

于 2013-06-01T07:48:21.193 回答
0

从此，尝试使用：

.container{
    overflow:hidden;
    width:620px;
    text-align: center; /* instead of margin: 0px auto; */
}
于 2013-06-01T06:22:20.440 回答
0

在 Internet Explorer 中，任何带有超链接的图像都会有一个蓝色边框......只需在 img 标签内添加边框 =“0”。下面的例子：

<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png" border="0" width="300px" height="300px">
于 2013-06-01T07:06:24.663 回答