为啥使用PhoneGap编译移动网站时HTML表格没有样式？
Posted
技术标签:
【中文标题】为啥使用PhoneGap编译移动网站时HTML表格没有样式？【英文标题】：Why is HTML table not styled when mobile website is compiled with PhoneGap?为什么使用PhoneGap编译移动网站时HTML表格没有样式？ 【发布时间】：2012-12-29 18:57:32 【问题描述】：我正在使用 jquery mobile 制作 html5 移动网站。它有五个向导格式的页面，每个页面查询一个 Web 服务以检索数据。在最后一页有一个 HTML 表格，该表格在代码中预定义，其中填充了来自 Web 服务的数据。没有动态添加行，只是表格单元格中的占位符填充了数据。
此表在样式表中定义了一些样式，在使用桌面或移动浏览器访问时看起来不错。但是，我也在将带有 PhoneGap“Build”的移动网站编译为适用于 android、ios 等的原生应用程序。除了最后一页之外，这也可以正常工作，表格没有采用样式并且完全没有样式。
您可以在此处查看该页面：http://m.freebets4all.com（删除空格）。只需通过向导移动到最后一页（选择 Betfred、Qualifying Bet 和任何“计算”按钮。当通过电话差距生成应用程序访问时，最后一页上的绿色表格完全没有样式。
为什么使用PhoneGap Build 编译时表格没有样式？任何人都可以向我指出一些可以解释这一点的文档，或者有任何在 PhoneGap 下设置 HTML 表格样式的经验吗？
这是有问题的页面，显示了 html 中预定义的表格。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="phoneGap.js"></script>
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="Styles/site.css" />
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="Scripts/Class.js"></script>
<script type="text/javascript" src="Scripts/matcher-1.0.js"></script>
</head>
<body>
<form>
<div class="main">
<div data-role="page" id="summary" data-title="Place Your Bets">
<script>
$('#summary').live('pagebeforecreate', function (event)
var betSummary = new BetSummary($("#summaryTable"), localStorage.selectedBet);
setTimeout(function () betSummary.displaySummary(); , 1);
setTimeout(function () $("summary").trigger('create') , 2000);
);
</script>
<div data-role="header">
<h1>
Place your bets...</h1>
</div>
<div data-role="content">
<div class="content">
<div id="betInstructionsContainer" class="content">
<table class="matchedBet" data-role="table" id="summaryTable" data-mode="reflow">
<caption>
<p id="iDateLabel">
</p>
<p id="iMatchLabel">
</p>
<p id="iMarketLabel">
</p>
</caption>
<thead>
<tr>
<th>
</th>
<th>
Back
</th>
<th>
Lay
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
</th>
<td>
<span id="iPlLabel" class="loss"></span>
</td>
</tr>
<tr>
<th>
</th>
<td>
<span id="iGainLabel" class="gain"></span>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>
</th>
<td>
<a id="iBookieLabel" title="" href="">
<img id="iBookieImage" src="Images/logos/75x16/10Bet.gif">
</a>
</td>
<td>
<a id="iExchangeLabel" title="Click to go to the BetDaq website" href="http://www.freebets4allstage.co.uk/bookmaker/BetDaq/">
<img id="iExchangeImage" src="Images/logos/75x16/BetDaq.gif">
</a>
</td>
</tr>
<tr>
<th id="iOddsHeader">
Odds
</th>
<td id="iBackOdds">
</td>
<td id="iLayOdds">
</td>
</tr>
<tr>
<th id="iStakeLabel">
Stake
</th>
<td id="iBackStake">
</td>
<td id="iLayStake">
</td>
</tr>
<tr>
<th id="iRiskLabel">
Risk
</th>
<td id="iBackRisk">
</td>
<td id="iLayRisk">
</td>
</tr>
<tr>
<th id="iProfitLabel">
Win
</th>
<td id="iBackProfit">
</td>
<td id="iLayProfit">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div data-position="fixed" data-role="footer">
<p class="gotosite">
<a href="http://www.freebets4all.com">Go to full website</a></p>
<p id="errorMessage">
</p>
</div>
</div>
</div>
</div>
</form>
</body>
【问题讨论】：
您确定该文件夹中的 css 文件名为 Styles 而不是 Styles。因为它区分大小写。 就是这样！从来没有这样一个简单的解决方案。使用 PhoneGap 时一定要小心大小写。我如何将答案归功于您？ 那我会在答案部分写答案:) 一个好的服务器/文件系统应该区分大小写。所以一定要区分大小写。 【参考方案1】：您确定该文件夹中的 CSS 文件名为 Styles 而不是样式，它区分大小写。
【讨论】：
以上是关于为啥使用PhoneGap编译移动网站时HTML表格没有样式？的主要内容，如果未能解决你的问题，请参考以下文章