縮略圖無法在Internet Explorer 6中保持其大小

Question

我正在與Galleria Classic合作。 如何在Internet Explorer中使縮略圖的高度和寬度全部相同？ 我已經使用（.galleria-thumbnails .galleria-image）樣式調整了CSS中的屬性。 它可以很好地在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;
}

Answer 1

修復IE Box模型錯誤這可能是IE 6及更低版本中最常見且令人沮喪的錯誤。 這是由於IE在計算盒子的總大小時使用不同的方法引起的。 讓我們說你寫

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

根據W3C規范，該框的總寬度應為124px，所有現代瀏覽器都應遵循此寬度，而IE則將其計算為僅100px。

偏離規格可能會導致很多布局問題。 如果您處於標准兼容模式，則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）

它使用Internet Explorer的CSS解析錯誤來解決此問題。 這是由Andrew Clover首先詳細介紹的

這種黑客的結構是

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

第一行width: 100px; 適用於Mozilla和Opera等能夠正確呈現的瀏覽器。 Opera和其他瀏覽器阻塞了轉義符（ \\ ），因此將忽略第二和第三個屬性。 第二個屬性\\width: 140px; 適用於IE 5和6 /怪癖模式。 最后一行w\\idth: 100px; 將由逃逸友好的瀏覽器（包括非怪癖模式下的IE 6）讀取，並將寬度設置回100px。

BOX-SIZING新引入的CSS3 box-sizing屬性允許您選擇瀏覽器應使用的box-model。 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的越野車模型。

希望這可以幫助...