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を見て：ここで

は、私はちょうど終了bodyタグの前に持っているスクリプトがある

.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ボックスモデルバグ を修正。これは、おそらく最も一般的であり、 IE 6以降の不満なバグ。これは、ボックスの合計サイズを計算する際にIEの異なるアプローチが原因で発生します。私たちはあなたが

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

は、W3Cの仕様によると、ボックスの合計幅はIEのみ100pxにとして、それを計算している間、すべての近代的なブラウザは、続く124px、あるべき書くとしましょう。

この仕様からの逸脱は、レイアウトの問題を引き起こす可能性があります。 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;} 

簡体BOX MODEL HACK（SBMH）

それは問題に対処するためのInternet ExplorerのCSSの構文解析バグを使用しています。これは、最初に、このハックのための構造は、最初の行width: 100px;が正しくレンダリングMozillaやOperaのようなブラウザのためである

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

であるアンドリュー・クローバー

により詳細に説明されました。 Operaや他のブラウザでは、エスケープ文字（\）が詰まるので、2番目と3番目のプロパティは無視されます。 2番目のプロパティー\width: 140px;は、IE 5および6/quirksモード用です。最後の行w\idth: 100px;はエスケープフレンドリーなブラウザ（非quirksモードのIE 6を含む）で読み込まれ、幅を100pxに戻します。

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

ウェブサイトがQuirksモードでレンダリングされている場合は、それが上のborder-boxプロパティを持っていたかのように、IE6は非標準のボックスモデルを使用してレンダリングされますので、それはすでにレンダリングされます。現代のブラウザは、このプロパティを設定することで、IEのバギーボックスモデルを採用します。これは役立つかもしれ

希望...