Question

我是jQuery和css等前端技术的新手，并且无法理解为什么相同的代码呈现的方式不同。以下代码段是jQuery example for sortable widget 文本在Firefox上呈现完美，但在Chrome中，文本Item 1，Item 2，...等等可以在下面的屏幕截图中看到。 Firefox版本 50.1.0， Google Chrome版本 55.0.2883.87

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

1 个答案: