Мой сайт выглядит одинаково в FireFox и Google Chrome, но не IE

-1

Мой сайт отлично выглядит в Firefox, Safari и Google Chrome, но ужасно в IE. Он неправильно расположен. Вот мой код и Fiddle Мой сайт выглядит одинаково в FireFox и 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>

Я буду обновлять эту тему, если я найду решение. Спасибо за чтение!

источник

2013-06-01 user2426889

IE версии плз? –

Это потому, что IE не делает «margin: 0 auto правильно. – tay10r

Вы сталкиваетесь с проблемой перевода. Coz Я проверяю ваш http://jsfiddle.net/an5jS/ в IE, его не переводящую непрозрачную часть, как в chrome –

Есть несколько вопросов.

Во-первых, вы предоставляете переходы только в браузерах WebKit при использовании префикса webkit. Вам нужна префиксная версия для Firefox, Opera и IE. Я бы также включил префикс -moz для версий, которые все еще нуждаются в нем.

Далее вы повторяете тот же код для четырех ящиков. Это не создает проблемы совместимости, но не идеально. Я переместил код в класс box, так как он используется только для четырех разделов.

Наконец, если изображение завернуто в якорь, IE добавляет границу, чтобы показать, что это ссылка. Вы можете удалить, что с помощью CSS, устанавливая границы никому:

a img { 
    border: none; 
}

Смотрите демо на http://jsfiddle.net/an5jS/7/

источник

2013-06-01 07:48:21

Большое спасибо! – user2426889

Взятые из this, попробуйте использовать:

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

источник

2013-06-01 06:22:20 tay10r

В Internet Explorer, любое изображение с гиперссылкой будет иметь синюю границу ... просто добавить границу = "0" внутри тега IMG. Пример ниже:

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

источник

2013-06-01 07:06:24 rob5300

Мой сайт выглядит одинаково в FireFox и Google Chrome, но не IE

ответ

Смежные вопросы