1

以下のリンクの「PROPERTY DOCUMENTS」セクションでカルーセルを使用しています。IE 8 では、li は奇妙に見えますが、最近のブラウザーのように広くはありません。

IE8で見栄えがするように、これに関する簡単な修正はありますか? 現在、li に次のカスタム属性がありますが、運がありません。それらは IE7 ではまったく表示されないので、この修正により IE7 でも表示されるようになることを願っています。

   .boutique img{

    }

    .boutique a {

    }

    .boutique li {

    }

私は最近、持っていたcssを取り出しました。それは事態を悪化させていました。

これがjQueryです...

<script>
$(document).ready(function(){
    $('#boutique').boutique({
    container_width:    200,
    front_img_width:     58,
    front_img_height:    72,
    starter:              3,
    speed:              900,
    hovergrowth:        0.2,
    behind_opacity:     0.3,
    back_opacity:         1,
    frames:               3,
    autoplay:         false,
    hovergrowth:          0,
    freescroll:       false,
    move_on_hover:    false,
    text_front_only:   true,
    });
});

およびjQueryファイルへのリンク。http://landpros.turnpostinteractive.com/javascripts/jquery.boutique.js

ブティックへの HTML は次のとおりです。

<div id="parent">
            <img id="prev-boutique" src="images/details-page/prev.png" onclick="boutique_previous()" />
            <img id="next-boutique" src="images/details-page/next.png" onclick="boutique_next()" />
            <!-- The Boutique HTML: -->
            <ul id="boutique">
                <li>
                    <a href="#frame1">
                        <img src="images/details-page/round-about.jpg">
                        <span>Optional description.</span>
                    </a>
                </li>
                <li>
                    <a href="#frame1">
                        <img src="images/details-page/round-about.jpg">
                        <span>Optional description.</span>
                    </a>
                </li>
                <li>
                    <a href="#frame1">
                        <img src="images/details-page/round-about.jpg">
                        <span>Optional description.</span>
                    </a>
                </li>           
            </ul>
        </div>

http://landpros.turnpostinteractive.com/LandPros_Details2_1.html

これはie8で何をしているのかへのリンクです... http://imgur.com/5LWsXal

どんな助けでも素晴らしいでしょう！ありがとうございました！

4

2 に答える 2

0

私にとっては、これを style.css に追加することで機能しました: #boutiqueinit .boutique-frame {border: 1px solid #ffffff;} IE8 でこれがないと、li が正しく表示されませんでした。その行はhttp://friquemag.net/demos/boutique/index2.html?v=152例 2の demo.css からのものです。

于 2014-06-13T07:30:15.557 に答える
0

<li>コードの要素を確認しました。使用している JavaScript は IE8 に最適化されていないようです。すべてのブラウザで要素の を設定しますが、IE8 のように幅を設定width:58pxします。画像に使用している jQuery コードへのリンクを教えてください。<li>6px

編集＃1

width:25%すべての<li>要素にプロパティを追加します。次の JavaScript の.dummyプロパティを持つクラスを定義します。width:36%

次に、この JavaScript を追加します。

var liElements = document.getElementsByTagName("li");
for (var i = 0; i < liElements.length; i++) {
  var liElement = liElements[i];
  if (liElement.style.top == "0px" && liElement.style.left == "0px") {
    liElement.className += "dummy"; 
  }
  else{
  liElement.className -= "dummy";
  }
}
于 2013-01-26T18:47:26.033 に答える