2016-09-09 2 views
1

Я создал страницу, просматривающую статью, которая работает во всех браузерах, кроме IE8 -... Что было бы хорошо, если бы это не было специально нацелено на IE с использованием машин ... Наихудшая часть что я на самом деле работал в какой-то момент, но я как бы потерял всю свою работу, когда возился с некоторыми кабелями под моим столом, я действительно должен был сэкономитьIE8 Не показывать divs с поплавками

Ниже приводится способ, которым я бы хотел посмотреть как во всех браузерах (до сих пор это выглядит только как это для всего в стороне от IE) Working image

И это то, что он выглядит как на IE ...

Not working

Это текущий CSS, я ничего не мог видеть, что приходит на ум

div.GalleryColumn {display: inline; height: 320px; width: 95%; overflow: auto; display: inline;} 

div.GalleryColumn.ColumnContent {width: 65%; max-height: 320px; margin-top: 25px; } 
div.GalleryColumn.ColumnContent:nth-child(odd) {float: right;} 
div.GalleryColumn.ColumnContent:nth-child(even) {float: left; text-align: right;} 

div.GalleryColumn.ColumnImage {width: 25%; height: 320px; margin-top: 25px;} 
div.GalleryColumn.ColumnImage:nth-child(odd) { 
    float: left; 
    margin-left: 50px; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5); 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5); 
} 
div.GalleryColumn.ColumnImage:nth-child(even) { 
    float: right; 
    margin-right: 50px; 
    -webkit-box-shadow: -10px 10px 5px 0px rgba(0,0,0,0.5); 
    -moz-box-shadow: -10px 10px 5px 0px rgba(0,0,0,0.5); 
    box-shadow: -10px 10px 5px 0px rgba(0,0,0,0.56); 
} 

Я не знаю, если это помогает, я просто запутался, потому что у меня было работая в какой-то момент, но теперь я забыл, как это исправить вообще

+0

HTTP : //caniuse.com/#search=float кажется, что IE8 не поддерживает float .. – scaisEdge

+0

Это будет иметь большой смысл ... Теперь я очень смущен тем, как мне удалось заставить его работать раньше. Я думаю, что у меня было это так, чтобы все изображения были справа и текст слева, потому что IE8 не поддерживает div: nth-child() –

ответ

0
div.GalleryColumn.ColumnContent {float: left; width: 65%; max-height: 320px; margin-top: 25px; } 

div.GalleryColumn.ColumnImage {float: right; width: 25%; height: 320px; margin-top: 25px;} 

Вот как у меня это было в последний раз! Поскольку IE8 не поддерживает: nth-child() [Спасибо за @Turi за напоминание] У меня было просто по умолчанию наличие текста с одной стороны, а изображений - с другой. Если их использование IE8, они, вероятно, не хотят, чтобы увидеть «прикольных» переменный текст/изображение в любом случае ...

Так что теперь IE8 будет выглядеть в то время как другие все еще чередующихся

enter image description here

1

Кажется, что IE8 не поддерживает псевдо-класс nth-child, так что это, скорее всего, ваша проблема.

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Будет ли pssible добавить .left и .right классы для отдельных элементов?

+0

Я помню сейчас! Ты напомнил мне! У меня было это с использованием поплавка по умолчанию. Итак, где я положил: div.GalleryColumn.ColumnImage {width: 25%; высота: 320 пикселей; margin-top: 25px;} и то же самое для ColumnContent, я просто дефолт, где они будут плавать. Поэтому, когда приходит браузер, например IE8, который не поддерживает nth-child(), он просто поместил бы текст с одной стороны, с изображениями на другом! Это одна из тех пятнадцати вещей! –

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