Миниатюры, не поддерживающие их размер в Internet Explorer 6

Question

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

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

<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; 
} 

Answer 1

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

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

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

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

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

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

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

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

УПРОЩЕННОЙ BOX МОДЕЛЬ HACK (SBMH)

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

Структура для этого хака

.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 в режиме не-quirks) и установите ширину обратно на 100 пикселей.

BOX-SIZING Введенное в CSS8 свойство выбора размера окна позволяет выбрать, какую модель окна использовать браузер. Модель коробки 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, установив это свойство.

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