What is causing this white box inside my Jquery Accordion?

问题

So, I've got a pretty basic Jquery Accordion all done up, but for the life of me I cannot pick out what is causing this white box inside my accordion content.

I will post my JSFiddle link here for ease of access to my code.

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

I'm sure one of you will pick it off in seconds, I'm just very beginner at JQUERY.

Thanks!

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 */

}

回答1:

Use an inspection tool in your browser of choice, you will be able to trace CSS properties.

This is generally how CSS debugging is done.

.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);
}

This seems to be causing your issue:

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

But less the image not being available:

background: rgb(255, 255, 255);

Is forcing your browser too interprate the background color as white, an accepted paramater of the CSS background property.

来源：https://stackoverflow.com/questions/16028943/what-is-causing-this-white-box-inside-my-jquery-accordion

标签

jquery

accordion