Проблема с кросс-браузером?

Я работаю над этим веб-сайтом пару дней, пока не сделал то, что боится большинство веб-разработчиков, посмотрите на сайт с другими браузерами, такими как IE и Firefox. По какой-то причине тикер логотипа в Firefox не упал, как в Google Chrome. Here is the website. Я попытался исправить это самостоятельно, просматривая свой исходный код, но ничего не нашел, я сделал неправильно. Что может быть причиной этой проблемы в Firefox?Проблема с кросс-браузером?

вот мой CSS:

.list_carousel { 
    background-color: #FFF; 
    margin: 0 0 30px 60px; 
    width: 360px; 
} 
.list_carousel ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    vertical-align:middle; 
} 
.list_carousel li { 
    font-size: 40px; 
    color: #999; 
    text-align: center; 
    vertical-align:middle; 
    background-color: #FFF; 
    width: 50px; 
    height: 75px; 
    line-height:75px; 
    padding: 0; 
    margin:6px; 
    float: left; 
} 
.list_carousel li img{ 
    vertical-align: middle; 
    display:inline-block; 
    opacity: 0.8; 
} 
.list_carousel li img:hover{ 
    vertical-align: middle; 
    display:inline-block; 
    opacity: 1; 
} 
.list_carousel.responsive { 
    width: auto; 
    margin-left: 0; 
} 
.clearfix { 
    float: none; 
    clear: both; 
}

Nice Google Chrome: enter image description here

И FireFox: enter image description here

источник

2013-07-21 Hunter Mitchell

Не могли бы вы разместить снимок экрана? – Doorknob

Более чем счастлив, держись на одну секунду. –

Поскольку вы плаваете в двух доступных элементах div, у контейнера div нет установленной высоты. Вам нужно будет сделать clearfix –

Добавить

clear: both;

к .list_carousel, что это исправить.

источник

2013-07-21 02:46:20 MisterBla

Спасибо за ваш комментарий выше! Действительно, в IE ничего не работает. Спасибо, что ответили на мой вопрос. –

Без проблем! С тех пор, как я обнаружил с помощью 'clear', на самом деле это так, я использовал его с веб-дизайном. Используйте его в сочетании с 'float', и вы настроены! – MisterBla

Если все элементы внутри контейнера floated то контейнер не будет иметь любой высоты.

Добавьте класс clearfix к <div class="LogoContainer"

.clearfix { 
    *zoom: 1; 
} 

.clearfix:before , .clearfix:after{ 
    display: table; 
    content: ""; 
    line-height: 0; 
} 

.clearfix:after{ 
    clear: both; 
}

на это должно решить проблему на всех браузерах.

источник

2013-07-21 02:46:07

Спасибо за ваш ответ! –

Рад помочь ... –

Проблема с кросс-браузером?

ответ

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