是什么导致我的 Jquery Accordion 内部出现这个白框？

Question

所以，我已经完成了一个非常基本的 Jquery Accordion，但是对于我的生活，我无法找出导致我的手风琴内容中出现这个白框的原因。

我将在此处发布我的 JSFiddle 链接，以便于访问我的代码。

http://jsfiddle.net/bQ5Gd/1/

我相信你们中的一个人会在几秒钟内完成它，我只是 JQUERY 的初学者。

谢谢！

HTML

<div id="accordion">

<h3>This is a test<h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed libero metus, aliquet vel euismod id, mattis sed quam. Nulla interdum leo adipiscing enim commodo hendrerit vel vitae lectus. Vivamus vehicula orci ac leo luctus ac egestas purus eleifend. Vivamus ac mauris risus, quis tempor massa. .</p>
    </div>
</div> <b>This text moves down with ACCORDION</b> 

Javascript

  $(function () {
      $("#accordion").accordion({
          event: "click",
          active: false,
          collapsible: true,
          autoHeight: false

      });
  });

CSS

#accordion {

    width: 400px;

}

#accordion .ui-accordion-content > * {

    margin: 0px;

}

#accordion .ui-accordion-content {

    width: 100%;

    background-color: #777;

    color: #000;

    border: none;

    font-size: 10pt;

    line-height: 15pt;

}

#accordion .ui-accordion-content a {

    color: #777;

}

#accordion .ui-accordion-header {

    background-color: #ccc;

    margin-left: auto;

    margin-right: auto;

    border: #fff;

}

#accordion .ui-accordion-header {

    background-color: #fff;

    background-image: -moz-linear-gradient(top, #fff 0%, #fff 100%);

    /* FF3.6+ */

    background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%, #fff), color-stop(100%, #fff));

    /* Chrome,Safari4+ */

    background-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);

    /* Chrome10+,Safari5.1+ */

    background-image: -o-linear-gradient(top, #fff 0%, #fff 100%);

    /* Opera 11.10+ */

    background-image: -ms-linear-gradient(top, #fff 0%, #fff 100%);

    /* IE10+ */

    background-image: linear-gradient(to bottombottom, #fff 0%, #fff 100%);

    /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa9300', endColorstr='#dc621e', GradientType=0);

    /* IE6-9 */

}

Answer 1

在您选择的浏览器中使用检查工具，您将能够跟踪 CSS 属性。

这通常是 CSS 调试的完成方式。

.ui-widget-content {
    border: 1px solid rgb(170, 170, 170);
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% rgb(255, 255, 255);
    color: rgb(34, 34, 34);
}

这似乎是导致您的问题的原因：

background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% rgb(255, 255, 255);

但更少的图像不可用：

background: rgb(255, 255, 255);

强制您的浏览器将背景颜色解释为白色，这是 CSS background 属性的可接受参数。