jQuery-ui进度栏在IE11中不可见

时间：2018-10-26 12:45:15

标签： jquery html css jquery-ui

我在下面有一个带有输入和jquery ui进度栏的窗口。
条形图的宽度应与输入字段的宽度相同。不幸的是，Internet Explorer在这里似乎需要特别注意，因为它根本不显示该栏。
现在唯一起作用的是设置固定宽度。但这显然不是我的选择。
我搜索了此问题，但找不到任何东西。
有什么建议吗？
编辑：
我使用col-auto的原因：How to center a bootstrap 4 row vertically and horizontally when there are some rows before
我通常要实现的目标：Nest rows inside a bootstrap 4 column 

$(document).ready(function() {
  $("#progress").progressbar();
    $("#progress").progressbar("value", 50);
});
#progress {
  height: 10px;
}

#progress .ui-progressbar-value {
  background: red;
}
<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

</head>

<body>
  <div class="container-fluid vertical-center">
    <div class="row justify-content-center task">
      <div class="col-auto stop-align-center">
        <div class="row">
          <div class="col-6">
            <input type="text" id="input" />
          </div>
        </div>
        <div class="row" id="wrapper">
          <div class="col">
            <div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
              <div class="col">
                <div id="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</body>

</html>

2 个答案:

答案 0 :(得分：2)

这里的问题是col-auto类，一个没有维度并且 IE11 的类无法“理解”您的“ #progress”栏有多大。您可以使用固定的类删除该类：col，col-1，col-2，col-3 ...无论您想要什么，您都会看到 IE11 将开始工作。

我知道，您的下一个问题将是“ 但是为什么Chrome和Firefox可以工作？”'因为IE11使用flexbox（https://caniuse.com/#search=flexbox）有一些限制，所以您必须帮助他理解您真正想要的是，因为有时...他是一个完全的硬汉！ ：D：D：D

顺便说一句，这不是一个大问题。知道他的局限性，您可以尝试其他方法来获得结果。在这种情况下，我真的不知道您要做什么，但是我可以向您发布一些示例，以帮助您找到解决方案。

例如，您要获得100％的进度条吗？很好，请使用col 

$(document).ready(function() {
    $("#progress").progressbar({
        value: 50
    });
});
#progress {
  height: 10px;
}


#progress .ui-progressbar-value {
  background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="container-fluid vertical-center">
  <div class="row justify-content-center task">
  
    <div class="col stop-align-center">
          <!-- ^^^^ change here!-->
      <div class="row">
        <div class="col">
          <form>
            <div class="form-group">
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
          </form>
        </div>
      </div>
      <div class="row" id="wrapper">
        <div class="col">
          <div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
            <div class="col">
              <div id="progress"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

或者您是否更喜欢与示例类似的居中对齐形式？太好了，请使用较小的col-4：

$(document).ready(function() {
    $("#progress").progressbar({
        value: 50
    });
});
#progress {
  height: 10px;
}


#progress .ui-progressbar-value {
  background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="container-fluid vertical-center">
    <div class="row justify-content-center task">
      <div class="col-4 stop-align-center">
             <!-- ^^^^ change here!-->
        <div class="row">
          <div class="col">
            <div class="form-group">
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
          </div>
        </div>
        <div class="row" id="wrapper">
          <div class="col">
            <div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
              <div class="col">
                <div id="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

...等等。玩这些类，在这项工作中，请始终记住：帮助IE11 ...，或更广泛地说，帮助资源管理器了解您真正想要的东西！ ;）

希望能对您有所帮助。

干杯！

编辑1

尝试复制图像：https://i.stack.imgur.com/fTcRy.png是我写的。请记住，在进度栏上使用col- *。全部垂直和水平居中。而且它在IE11上也很好用;）

$(document).ready(function() {
    $("#progress").progressbar({
        value: 50
    });
});
body{
      height: 100vh;
      display: flex;
      align-items: center;
    }

    #progress {
      height: 10px;
    }

    #progress .ui-progressbar-value {
      background: red;
    }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<body>
  <div class="container">
    <div class="row">
      <div class="col">
        content
      </div>
      <div class="col">
        content
      </div>
      <div class="col">
        <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
      </div>
    </div>
    <div class="row justify-content-end">
      <div class="col-4">
        <div id="progress" class="mb-3"></div>
      </div>
    </div>
    <div class="row justify-content-end">
      <div class="col-4">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
      </div>
    </div>
  </div>
  </body>

答案 1 :(得分：1)

问题出在我的bootstrap.min.css文件中，我更改了bootstrap CDN路径，对我有用：

新的引导CDN：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<html>

<head>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

</head>

<body>
  <div class="container-fluid vertical-center">
    <div class="row justify-content-center task">
      <div class="col-auto stop-align-center">
        <div class="row">
          <div class="col-6">
            <input type="text" id="input" />
          </div>
        </div>
        <div class="row" id="wrapper">
          <div class="col">
            <div class="row">
              <!-- not unnecessary because in production there are more rows in parent col! -->
              <div class="col">
                <div id="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $("#progress").progressbar();
      $("#progress").progressbar("value", 50);
    });
  </script>
  <style>
    #progress {
      height: 10px;
    }
    
    #progress .ui-progressbar-value {
      background: red;
    }
  </style>
</body>

</html>

相关问题
最新问题