jquery-ui 进度条在 IE11 中不可见答案

【问题标题】：jquery-ui progress bar not visible in IE11jquery-ui 进度条在 IE11 中不可见
【发布时间】：2018-10-26 12:45:14
【问题描述】：

我有一个窗口，下面有一个输入和一个 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>

【问题讨论】：

添加这个
您能再解释一下吗？由于我使用 cdn 导入 jquery，我不知道这个脚本应该来自哪里。另外我会说这是一个CSS问题。该代码在任何其他浏览器中运行良好。我还应该说这只是一个示例代码。在“现实”中，我得到了一个 bootstrap.js，我在其中导入了我用过的小部件。

标签： jquery html css jquery-ui

【解决方案1】：

这里的问题是类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……或者，更一般地说，帮助 Explorer 了解你真正想要的东西！ ;)

说真的，希望对你有帮助。

干杯！

编辑 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>

【讨论】：

非常感谢！我已经知道 IE 有时有点奇怪。但是直到现在我还没有找到一个文档或者如果你需要 IE 支持你需要知道什么。我用我真正想要实现的目标编辑了我的问题。当我不使用 col-auto 时，整个东西不再居中（在 IE 中这也不能很好地工作）。你能说如何避免 col-auto 并仍然实现我想要的吗？此外，为什么在使用不同的引导源时会得到不同的结果？（见其他答案）
在另一个答案中，没有任何引导 CSS，因为用于包含它的链接没有 rel="stylesheet" 的属性，然后它可以工作，因为没有“flexbox”问题.
你说得对。有什么想法为什么我在不使用 col-auto 时会遇到麻烦？
您希望代码 sn-p 垂直和水平居中，对吗？它类似于此图像i.stack.imgur.com/fTcRy.png 并且您有 [...] 您想要放置进度条的位置。我做对了吗？
第一个 [...] 是我的进度条。第二个是按钮组。所以是的，你是对的！

【解决方案2】：

问题在于您的 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>

【讨论】：

我用 CDN 来回答这个问题。在“现实”中，我通过 npm (v4.1.3) 安装了它，并将其导入到我的主 css 文件中。奇怪的是你是对的。当我尝试您的 sn-p 时，它可以工作。你知道为什么我在使用 "bootstrap": "^4.1.3" 作为依赖项时遇到问题吗？
我认为你需要检查bootstrap中是否有任何IE相关设置": "^4.1.3 你需要添加或启用表单polyfills文件