为什么谷歌浏览器无法在 jQuery 可排序小部件中正确显示文本？答案

【问题标题】：Why google chrome fails to properly display text in jQuery sortable widget?为什么谷歌浏览器无法在 jQuery 可排序小部件中正确显示文本？
【发布时间】：2017-01-21 12:39:13
【问题描述】：

我是 jQuery 和 css 等前端技术的新手，无法理解为什么相同的代码呈现不同的效果。以下代码 sn -p 是jQuery example for sortable widget。
该文本在 Firefox 上完美呈现，但在 chrome 中，文本 Item 1、Item 2、... 等会消失，如下面的屏幕截图所示。
Firefox 版本： 50.1.0 , 谷歌浏览器版本： 55.0.2883.87

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    #sortable {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
    }
    #sortable li {
      margin: 0 3px 3px 3px;
      padding: 0.4em;
      padding-left: 1.5em;
      font-size: 1.4em;
      height: 18px;
    }
    #sortable li span {
      position: absolute;
      margin-left: -1.3em;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#sortable").sortable();
      $("#sortable").disableSelection();
    });
  </script>
</head>

<body>

  <ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
  </ul>


</body>

</html>

【问题讨论】：

无法使用您发布的完全相同的代码和完全相同的 chrome 版本进行复制

标签： jquery css google-chrome jquery-ui firefox

【解决方案1】：

终于想通了。我在谷歌浏览器中自定义了字体并将其设置为Google Noto Fonts 之一。将字体设置回默认值可以解决此问题。

【讨论】：