Миниатюры не сохраняют свой размер в Internet Explorer 6 - PullRequest
1 голос
/ 08 февраля 2011

Я работаю с Galleria Classic. Как я могу сделать так, чтобы мои эскизы были одинаковой высоты и ширины в 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;
}

1 Ответ

1 голос
/ 08 февраля 2011

Исправление баговой модели IE Box Это, пожалуй, самая распространенная и неприятная ошибка в 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 / quirks. Последняя строка w\idth: 100px; будет прочитана дружественными браузерами (в том числе IE 6 в режиме non-quirks) и вернется к ширине 100px.

BOX-РАЗМЕР Недавно появившееся свойство CSS3 box-sizing позволяет вам выбрать, какую блочную модель должен использовать ваш браузер. Блочная модель 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, установив это свойство.

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

...