是什么原因造成我的jQuery的手风琴这里面白色的盒子?(What is causing this

2019-10-18 01:07发布

所以,我有一个非常基本的jQuery折叠全部完成了,但对我的生活,我不能挑出什么原因造成我的手风琴内容这里面的白色盒子。

我会在这里发布我的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);

迫使浏览器太interprate背景色为白色,在CSS的接受paramater background属性。



文章来源: What is causing this white box inside my Jquery Accordion?