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-wrapper CSS：

overflow: hidden;

更新小提琴：http: //jsfiddle.net/johnkoer/4vYLb/1/

于 2012-08-16T15:53:03.360 回答