Question

*，

在加载下面的html页面时，我的Firefox控制台出现以下错误（请参阅代码段）。另一方面，Chrome控制台没有说什么......＆gt; _＆gt;

downloadable font: OS/2: bad linegap: -32 (font-family: "Dropdown" style:normal weight:normal stretch:normal src index:0)
source: data:application/x-font-ttf;charset=utf-8;base64,<<...>>
semantic.css:30715:12

而且dropdown在两个浏览器上根本不起作用（〜不显示items）。

你知道为什么以及如何解决它？

THKS

Semantic-UI js / css - 2.2.10
jQuery v3.2.1

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css'>
    </head>
    
    <body>
        <div class="ui selection dropdown">
            <input name="gender" type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">Gender</div>
            <div class="menu">
                <div class="item" data-value="1">Male</div>
                <div class="item" data-value="0">Female</div>
            </div>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
    </body>
</html>

＆＃13;

我的问题可能与那个问题相同：https://github.com/Semantic-Org/Semantic-UI/issues/2146

Answer 1

即使您的HTML是Dropdown模块的有效标记，您仍需要使用JavaScript初始化它。

了解详情：Dropdown - Initializing Existing HTML

$('.ui.dropdown').dropdown();

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css'>
    </head>
    
    <body>
        <div class="ui selection dropdown">
            <input name="gender" type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">Gender</div>
            <div class="menu">
                <div class="item" data-value="1">Male</div>
                <div class="item" data-value="0">Female</div>
            </div>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
    </body>
</html>

“Bad Linegap”错误并未阻止下拉列表工作。

Semantic-UI ::可下载字体 - 坏线条

1 个答案: