0

FF 17.0.1、Chrome 23.0.1271.97、Safari 5.0.3 で見たときにきれいに見える画像ギャラリーを作成しました。ツール "IETester" は、IE 9 のページも正しく表示します。IE8 の互換モードで表示すると、正常に表示されますが、デフォルト モードでは表示されません。

CSS ファイル「core.css」は、次のルールを追加します。

/* Image ---*/
img {
  max-width: 100%;
}

このルールは非常に多くのサードパーティ テンプレートの 1 つであるため、このルールを変更できるかどうかはわかりません。このルールは、IE8 のギャラリーの画像を折りたたむようです。画像が常に元のサイズで表示されるとは限らないため、追加のルール 'width:auto' を設定することはできません。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >

    <head>
      <title></title>
    <link rel="stylesheet" href="/media/plg_fancybox2/css/aobgallery.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/templates/ja_lens/css/reset.css" media="all" />
    <link rel="stylesheet" type="text/css" href="/templates/ja_lens/css/core.css" media="all" />

    </head>
    <body>


    <p><script type='text/javascript'>var tlist = ['/images/showroom/playground/displaced/Disp_7b1.jpg','/images/showroom/playground/displaced/dispm_6.jpg','/images/showroom/playground/displaced/dispm_9.jpg','/images/showroom/playground/displaced/dispm_9b.jpg','/images/showroom/playground/displaced/dispm_9c.jpg','/images/showroom/playground/displaced/dispm_10a.jpg','/images/showroom/playground/displaced/dispm_12b.jpg','/images/showroom/playground/displaced/dispm_12d.jpg','/images/showroom/playground/displaced/dispm_12e.jpg','/images/showroom/playground/displaced/dispm_12f.jpg'];

    </script><div id="fancycontainer">
    <div class="fancyitem"><a href="/images/showroom/playground/displaced/Disp_7b1.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 0,helpers : { title  : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/Disp_7b1.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_6.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 1,helpers : { title   : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_6.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 2,helpers : { title   : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9b.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 3,helpers : { title  : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9b.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9c.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 4,helpers : { title  : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9c.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_10a.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 5,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_10a.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12b.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 6,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12b.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12d.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 7,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12d.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12e.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 8,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12e.jpg" /></a></div>

    <div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12f.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 9,helpers : { title : { type : 'inside' },  buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12f.jpg" /></a></div>

    </div></p>



    </body>
    </html>

これは、ギャラリーのフォーマットに使用される css です: aobgallery.css

#fancycontainer
{
    list-style: none outside none;
    margin: 8px auto !important;
    overflow: hidden;
    padding: 8px !important;
    border:1px solid #000000;
}

.fancyframe
{
    display: block;
    float:left;
    font-size: 11px;
    font-weight: bold;
    left: 0;
    padding: 5px;
    right: 0;
    text-align: left;
    top: 0;
}


.fancyframe:hover
{
  background-color: #333333;
}

属性 'max-width' を 100% に設定すると、IE8 で画像が折りたたまれるのはなぜですか? これが起こらないように html を変更できますか? これを修正する追加の CSS ルールを定義できますか?

問題のオンライン デモは次のとおりです: http://demo.artonbit.com/test.htm

4

2 に答える 2

1

cssの順序を並べ替えてみましたか？'ol css reset をロード順序の先頭に移動して、ブラウザのスペーシングをリセットしたいと思われるようです。

これは、CSS リセットのポイントを説明するのに役立ちます: CSS ブラウザー リセット コードを使用する目的は何ですか?

于 2012-12-23T20:01:23.613 に答える
0

これは、コンテナが画像の幅に縮小する IE8 のバグです。私は出張中なので、今のところバグ リストで調べることはできませんが、他の誰も完全な説明を見つけられない場合は、Google で検索できると確信しています。

修正するには、画像の周りに div を設定し、div に max-width を配置します。この問題は、img が何であるかである置き換えられた要素によって引き起こされます。(まあ、問題は実際には IE が原因ですが、余談です。)

于 2012-12-23T22:42:27.913 に答える