1

よくある質問のセクションを作成しました。ChromeとFirefoxでは問題ありませんが、IE 8では、要素を上にスライドすると、下マージンが失われるようです。

私はフィドルを用意しましたが、別の問題があるようで、Chromeでは複数の下の境界線が表示されて混乱しているように見えます。

なぜこれが起こっているのか誰かが知っているかどうかを見たいと思っていましたか？

フィドル： http： //jsfiddle.net/4vYLb/

HTML

<div id="faq-q-a">

    <div class="question-wrapper">
        <h3>This is the first question?</h3>
        <div class="answer">
           <p>Morbi et arcu eget dolor tempor volutpat. Mauris a leo dolor, vitae cursus diam. Morbi faucibus convallis rutrum. </p>
        </div>
    </div>

    <div class="question-wrapper">
        <h3>This is the second question?</h3>
        <div class="answer">
            <p>Morbi et arcu eget dolor tempor volutpat. Mauris a leo dolor, vitae cursus diam. Morbi faucibus convallis rutrum. </p>
        </div>
    </div>

    <div class="question-wrapper">
        <h3>This is the third question</h3>
        <div class="answer">
            <p>Morbi et arcu eget dolor tempor volutpat. Mauris a leo dolor, vitae cursus diam. Morbi faucibus convallis rutrum. </p>
        </div>
   </div>    

</div>​

jQuery

$('#faq-q-a h3').each(function() {
    var h3 = $(this);
    answer = h3.next('.answer').hide().css('height','auto').slideUp();

    h3.click(function() {
        h3.parent('.question-wrapper').toggleClass('active');

        if (h3.parent('.question-wrapper').is('.active')) {
            h3.next('.answer').slideDown('slow');
        }
        else {
            h3.next('.answer').slideUp('slow');
        }
    });
});

CSS

#faq-q-a {
    position: relative;
    margin: 10px 0 10px 10px;
    padding: 0 0 0 22px;
}

.question-wrapper {
    background-color: #e5e5e5;
    border: 1px solid #cccccc;
    margin-bottom: 20px;
    padding: 5px 0 5px 25px;
    width: 420px;
    background: #e5e5e5;
}  

.question-wrapper.active {
    background-color: #ffffff;
    background: #ffffff;
}

#faq-q-a h3 {
    cursor: pointer;
    color: #408261;
    font-weight: bold;
    font-family: arial, Helvetica;
    font-size: 14px;
    margin-bottom: 10px;
}

#faq-q-a div.answer {
    position: relative;
    height: 0;
    overflow: hidden;
}

#faq-q-a div.answer p {
    padding: 0;
    margin: 0;
    font-family: arial, Helvetica;
    color: #555;
    font-size: 12px;
    width: 300px;
}​​
4

1 に答える 1

0

.question-wrapperCSSに以下を追加します。

overflow: hidden;

更新されたフィドル：http：//jsfiddle.net/johnkoer/4vYLb/1/

于 2012-08-16T15:53:03.360 に答える