-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