IBM Worklight - 应用程序在浏览器中正确显示，但在 MBS 中预览时不正确
Posted
技术标签:
【中文标题】IBM Worklight - 应用程序在浏览器中正确显示，但在 MBS 中预览时不正确【英文标题】：IBM Worklight - App displays properly in browser but not when previewing in the MBS 【发布时间】：2013-11-21 12:13:54 【问题描述】：我正在编写一个 Worklight Hybrid 应用程序并在其中使用 jQuery Mobile。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="jqueryMobile/jquery/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/itemDetails.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery/jquery-1.9.1.js"></script>
<script src="jqueryMobile/jquery/jquery.mobile-1.3.1.js"></script>
<script src="js/itemDetails.js"></script>
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
<h1>Item Details</h1>
<a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="modules/core/MenuPanel.js"></script>
</body>
</html>
CSS：
@CHARSET "UTF-8";
#itemDetailsNavBar
background: #ffb400 !important;
height: 44px;
padding-top: 20px;
#listButtonLeft
background: transparent url("images/list.png");
box-shadow: none;
data-corners :"false";
margin-top: 19px;
border: none;
#editButtonRight
background: transparent url("images/edit.png");
box-shadow: none;
data-corners :"false";
margin-top: 15px;
border: none;
在浏览器中预览时，我可以正常看到：
但是当通过 Worklight Console 的 MBS 进行预览时，我得到的是：
【问题讨论】：
data-corners :"false" 应该做什么？
我猜是为了去除圆角。
嗯，这不应该在 css 中，因为它不是 css 规则。您应该只将其用作您似乎已经拥有的 html 属性。
从 CSS 中删除，没用！
这是 Worklight 6.0，对吧？已经有 jquery 内置了，你不需要包含这一行： -- 它也不是 jquery mobile，所以为什么放在那个文件夹里？此外，这个文件甚至没有被使用，因为你没有删除它上面的行，这意味着应用程序仍在使用内置的 jquery。
【参考方案1】：
我从头部删除了 CSS 并将其添加到 body 结束标记之前，并且在模拟器和 MBS 中一切似乎都运行良好。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<a href="#leftPanel" data-role="ui-icon-list-panel" data-corners="false" id="listButtonLeft"></a>
<h1>Item Details</h1>
<a href="index.html" data-role="ui-icon-edit" data-corners="false" id="editButtonRight"></a>
</div>
</div>
<link rel="stylesheet" href="css/itemDetails.css">
<script src="js/itemDetails.js"></script>
</body>
</html>
【讨论】：
以上是关于IBM Worklight - 应用程序在浏览器中正确显示，但在 MBS 中预览时不正确的主要内容，如果未能解决你的问题，请参考以下文章
IBM Worklight 6.1 - 如何集成 Ionic 框架？
IBM Worklight 6.0 - 移动浏览器模拟器是不是支持 Worklight 皮肤？