Миниатюры не сохраняют свой размер в Internet Explorer 6

Я работаю с Галереей Классик. Как я могу сделать все миниатюры одинаковой высоты и ширины в Internet Explorer? Я настроил атрибуты в CSS, используя стиль (.galleria-thumbnails .galleria-image). Он отлично работает в Safari и Firefox, но Internet Explorer, кажется, либо растягивает ширину некоторых моих больших пальцев, либо изменяет их размер и обрезает их. Кажется, что высота никогда не меняется, и это хорошо, но я хочу, чтобы все они были одинаковыми. Любые идеи?

Вот сценарий, который у меня есть непосредственно перед закрывающим тегом body:

<script>
    Galleria.loadTheme('tools/galleria/themes/classic/galleria.classic.js');
</script>

<script>
    $('#galleria').galleria({
        extend: function() {
            this.play(3000);
            this.bind(Galleria.LOADFINISH, function(e) {
                $(e.imageTarget).click(this.proxy(function(e) {
                    e.preventDefault(); // removes the garbage
                    var obj = this.getData();
                    $.fancybox({
                        'href': obj.image

                    });
                }))
            });
        }
    });
</script>

CSS выглядит так:

.galleria-thumbnails-container {
    bottom: 0;
    left: 5px;
    position: absolute;
    z-index: 2;
    margin-top: 10px;
    width: 400px;
    height: 60px;
}
.galleria-carousel .galleria-thumbnails-list {
    margin-left: 30px;
    margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: #000;
    border: 1px solid #000;
    float: left;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 0;
    text-align: left;
}

javascript css galleria
person kcprice    schedule 07.02.2011    source источник
comment
Код Galleria на самом деле не имеет смысла в этом контексте — мы должны увидеть стили CSS, которые вы упомянули выше.   -  person Pekka    schedule 08.02.2011
comment
Можете ли вы показать это на живом примере? Искажает ли все миниатюры размер 60 x 40?   -  person Pekka    schedule 08.02.2011
comment
У меня нет живого примера, чтобы показать. Я пытался не указывать ширину и высоту в CSS, но тогда миниатюры исчезали все вместе. Прямо сейчас у меня есть 2 файла на изображение, файл эскиза размером 60x40 и файл полного изображения размером 642x427 (или где-то близко к этому). Миниатюры, которые искажают, — это те, у которых более крупное изображение не совсем 642x427.   -  person kcprice    schedule 08.02.2011
comment
JS, вероятно, не имеет значения, но соответствующий HTML поможет.   -  person DanMan    schedule 08.02.2011
comment
Я попытался опубликовать HTML, но сайт не позволил мне. Я думаю, что это как-то связано со ссылками в моем коде... Хотелось бы, чтобы я мог сделать что-то еще, чтобы помочь объяснить. Я тоже пытался сделать снимок экрана, но сайт тоже не позволял мне загружать изображения.   -  person kcprice    schedule 08.02.2011

Ответы (1)


arrow_upward
1
arrow_downward

Исправление ошибки блочной модели IE Это, пожалуй, самая распространенная и неприятная ошибка в IE 6 и более ранних версиях. Это вызвано разным подходом IE к вычислению общего размера блока. Допустим, вы пишете

.box {
   width:100px;
   padding:10px;
   border:2px solid #CCC;
}

Согласно спецификациям W3C, общая ширина блока должна быть 124 пикселя, которой следуют все современные браузеры, в то время как IE вычисляет ее только как 100 пикселов.

Это отклонение от спецификаций может вызвать множество проблем с макетом. IE 6 может сделать это правильно, если вы находитесь в режиме, соответствующем стандартам. Существуют различные обходные пути для этой проблемы. Некоторые из них:

BOX-IN-A-BOX Согласно этому методу, мы просто используем дополнительную разметку, чтобы решить проблему. Вместо того, чтобы использовать отступы для основного элемента, мы вставляем внутрь него другой элемент и применяем к нему отступы. Нравится

<div class=”box”>
  <div class=”box-inner”>
    Testing for box model hack
  </div>
</div>

В этом случае наша разметка будет

.box { width:100px;}
.box-inner {padding:10px;}

УПРОЩЕННАЯ БЛОК-МОДЕЛЯ (SBMH)

Он использует ошибку синтаксического анализа CSS в Internet Explorer для решения проблемы. Впервые это было подробно описано Эндрю Кловером.

Структура этого хака

.box {
   padding:20px;
   width: 100px;
   \width: 140px;
   w\idth: 100px;
}

Первая строка width: 100px; предназначена для таких браузеров, как Mozilla и Opera, которые отображают правильно. Opera и другие браузеры подавляют escape-символ (\) и игнорируют второе и третье свойства. Второе свойство \width: 140px; предназначено для IE 5 и 6/причудливого режима. Последняя строка w\idth: 100px; будет прочитана дружественными браузерами (включая IE 6 в режиме без особенностей) и установит ширину обратно на 100 пикселей.

BOX-SIZING Недавно введенное свойство box-sizing CSS3 позволяет вам выбрать, какую модель блока должен использовать ваш браузер. Блочная модель W3C называется content-box, а блочная модель Internet Explorer — border-box.

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

.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

Если веб-сайт отображается в необычном режиме, IE6 будет отображать с использованием нестандартной блочной модели, поэтому он уже будет отображаться так, как если бы у него было включено свойство border-box. Современные браузеры примут ошибочную блочную модель IE, установив это свойство.

Надеюсь, это может помочь...

person Shabir Gilkar    schedule 08.02.2011