基于语义 UI 的页面在 Tide SDK 中无法正常工作答案

【问题标题】：Semantic-UI based page not work correctly in Tide SDK基于语义 UI 的页面在 Tide SDK 中无法正常工作
【发布时间】：2015-05-20 02:39:30
【问题描述】：

我正在尝试使用 Semantic-UI (http://semantic-ui.com/) 在 TideSDK 中制作一些应用程序。当我在 Chrome 中打开我的页面时，它可以正常工作：

chrome http://krakow45.pl/test/chrome.png

但是当我使用 TideSDK 启动我的代码时，它看起来像：

tide http://krakow45.pl/test/tide.png

你怎么看，一些元素丢失了，它不能正常工作。

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <!-- JavaScript includes -->
    <script src="vendor/jquery.js"></script>
    <script src="js/app.js"></script>
    <script src="vendor/semantic/semantic.js"></script>
    <!-- /JavaScript includes -->

    <!-- CSS includes -->
    <link rel="stylesheet" type="text/css" href="vendor/semantic/semantic.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- /CSS includes -->

    <title>xxx</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- PAGE: NEW_REPORT -->
    <div id="NEW_REPORT_fieldsContainer" class="ui segment">
        <div class="ui input">
            <input id="NEW_REPORT_firstName" type="text" placeholder="Imię">
        </div><br /><br />
        <div class="ui input">
            <input id="NEW_REPORT_lastName" type="text" placeholder="Nazwisko">
        </div><br /><br />
        <div class="ui left icon input">
            <input id="NEW_REPORT_date" type="text" placeholder="26/03/2015">
            <i class="calendar icon"></i>
        </div><br /><br />
        <div id="NEW_REPORT_buttonNext" class="ui animated button">
            <div class="visible content">Dalej</div>
            <div class="hidden content">
                <i class="right arrow icon"></i>
            </div>
        </div>
    </div>
    <!-- /PAGE: NEW_REPORT -->
</body>

【问题讨论】：

我不确定 TideSDK 中的 mybe webkit 版本是否太旧？
请包含您的 CSS。小提琴会有所帮助。

标签： javascript html tidesdk semantic-ui

【解决方案1】：

请记住，TideSDK 使用的是旧版本的 webkit。我很确定你必须为你的 CSS3 规则添加前缀（-webkit-）。但也要记住，不能使用所有的 CSS3 规则，但目前我还没有遇到重大的 CSS3 问题。只有一件事困扰着我，它是旧的开发者控制台..

【讨论】：

我决定使用 NW.js 代替 TideSDK。 NW.js 使用更新（或最新）版本的 webkit。非常感谢你:)

【解决方案2】：

TideSDK 似乎不再是开发这些应用程序的绝佳选择 :( 遗憾的是，在他们开始开发 TideKit 之后，没有提供任何支持。最后一个版本应该支持所有 CSS 3 元素，但实际上不支持。

很高兴你找到了出路:)

【讨论】：