IBM Worklight-應用程序在瀏覽器中正確顯示，但在MBS中預覽時無法正確顯示

Question

我正在編寫一個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進行預覽時，這就是我得到的：

在此處輸入圖片說明

Answer 1

我從頭部移除了CSS，並在body end標簽之前添加了CSS，並且在模擬器和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中預覽時無法正確顯示

問題描述

1 個解決方案

解決方案1
1 已采納 2013-12-06 05:27:29

IBM Worklight-應用程序在瀏覽器中正確顯示，但在MBS中預覽時無法正確顯示

問題描述

1 個解決方案

解決方案1 1 已采納 2013-12-06 05:27:29

解決方案1
1 已采納 2013-12-06 05:27:29