W3.css 与 JQuery 冲突 UI 进度条

W3.css Conflicting with JQuery UI Progress Bar

我已经迫不及待了。我无法弄清楚这一点,现在已经尝试了三天。我正在使用 w3.css 与 jQuery UI 和 jQuery UI.css.

问题: 进度条出现但未填充。当您删除 href 到 w3.css 时,进度条工作正常。但除此之外,填充不会发生。

FIDDLE: http://jsfiddle.net/kjg95pxq/7/

HTML

<body class="w3-content" style="max-width:1300px">

  <!-- ROW 3.1: Skillsets Section -->
  <div class="w3-container">

    <div class="progressbar w3-center" id="progressbar" data-value="50">
      <p style="position:absolute">20%</p>
    </div>
  </div>

  <div class="w3-row" id="rowWaypoint2">
    <div class="capsuleBox3 animated" id="capBox3">
      <div class="w3-half w3-dark-grey w3-container w3-center" id="contact" style="height:700px">
        <div style="padding-top:55px">
          <h1>Skillsets</h1>
          <p>My current skill progressions</p>
        </div>

        <!-- Progress Bar for JavaScript/jQuery -->

        <div style="padding-top:18px">
          <p> Tacos </p>
        </div>

        <div style="padding-top:0px">
          <div class="progressbar w3-center" data-value="40">
            <p style="position:absolute">20%</p>

          </div>
        </div>

        <div class="progressbar w3-center" id="progressbar" data-value="80">
          <p style="position:absolute">20%</p>
        </div>

        <div class="progressbar w3-center" data-value="20">
          <p style="position:absolute">20%</p>
        </div>

      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</body>

CSS

.progressbar {
  width: 80%;
  margin: 20px auto;
}

.ui-progressbar-value {
  transition: width 0.5s;
  -webkit-transition: width 2s;
}

JS

$(document).ready(function() {
  pbRun();
  function pbRun() {
    $(".progressbar").progressbar();
    //this initializes the widget
    $(".progressbar").each(function() {
      var valPB = parseInt($(this).data('value'));
      var percentPB = valPB;
      $(this).progressbar("option", "value", percentPB);
    });
  }
});

尝试使用:

.ui-progressbar .ui-progressbar-value {
  box-sizing: content-box;
}

w3.css 添加:

*, *:before, *:after {
  box-sizing: inherit;
}

代码混乱。

JSfiddle