Я создал веб-сайт, который отлично работает в Google Chrome и Firefox, но когда я запускаю его в Internet Explorer, у меня возникают проблемы.
Итак, у меня есть 2 слайд-шоу на моей индексной странице, но только одно должно отображаться при определенном разрешении экрана. Я создал несколько медиа-запросов, чтобы установить display:none;
для слайд-шоу, которое мне не нужно в этом разрешении. И чтобы он появился снова, я использую display:initial;
, но Internet Explorer не поддерживает эту команду.
Мне нужен способ сделать видимым то, что было невидимым с помощью display:none;
в Internet Explorer.
PS: использование visibility:hidden;
не вариант, потому что он не должен резервировать место.
Если вы можете мне помочь, пожалуйста, ответьте. Если вы не можете, я все равно благодарю вас за то, что вы это прочитали.
Вот код; это может помочь (я не уверен, как правильно опубликовать, извините):
<section id="containerGrotePage">
<div id="page">
<ul id="slider">
<li><img src="images/slideshow/image2.jpg" alt="slideshow foto 1" /></li>
<li><img src="images/slideshow/image1.jpg" alt="slideshow foto 2" /></li>
<li><img src="images/slideshow/image3.jpg" alt="slideshow foto 3" /></li>
<li><img src="images/slideshow/image4.jpg" alt="slideshow foto 4" /></li>
</ul>
</div>
</section>
<div id="pageKlein">
<ul id="sliderKlein">
<li id="kleineSlideLi">
<img id="fotoslideshowKlein" src="images/slideshow/image1.jpg" alt="slideshow foto 1" />
</li>
</ul>
<button onclick="slideshowKlein()" id="indexkleineSlideshowKnop">volgende</button>
</div>
Вот что я делаю на самом маленьком экране:
#containerGrotePage{
display:none;
}
#page{
display:none;
}
#kleineSlideLi{
background-color:black;
padding: 10px 50px 10px 50px;
}
#fotoslideshowKlein{
width:90%;
margin-left:4%;
border: 1px solid black;
}
#indexkleineSlideshowKnop{
width:90%;
margin-top:1%;
margin-left:4%;
}
первый медиа-запрос мин: 440px
@media only screen and (min-width:440px){
#container{
margin-top:3%;
}
/*--slideshow--*/
#page {
display:initial;
width:600px;
margin:50px auto;
}
#slider {
width:600px;
height:250px;
/*IE bugfix*/
padding:0;
margin:0;
}
медиа-запрос мин: 610px
#slider li {
list-style:none;
}
#containerGrotePage{
display:initial;
display:block;
width:600px;
margin-top:2%;
margin-left:auto;
margin-right:auto;
}
#pageKlein{
display:none;
}
#page {
display:initial;
width:600px;
margin:50px auto;
}
#slider {
width:600px;
height:250px;
/*IE bugfix*/
padding:0;
margin:0;
}
медиа-запрос мин: 715px
#slider {
width:600px;
height:250px;
/*IE bugfix*/
padding:0;
margin:0;
}
#slider li {
list-style:none;
}
#page {
width:600px;
margin:50px auto;
}
Надеюсь, предоставленная мной информация окажется полезной.
ContainerGrotePage — это большое слайд-шоу, BTW, а pageklein — маленькое. Я говорю по-голландски, поэтому некоторые имена могут быть непонятны англоговорящим. :)
Заранее спасибо, ребята!