Webkit JQuery Mobile块内联转换不起作用

Question

我想要在移动浏览器上进行方向更改.当方向改变时,div"wrapStat"应该在内联和块显示之间改变.

这个完整的文本块每隔X秒被一个ajax调用替换,因此在wrapStat类本身上放置一个样式将不起作用.我正在更改portraitCustomStats和landscapeCustomStats之间的父#CustomStats类,具体取决于方向.

这适用于Firefox(调整浏览器大小将翻转方向标志)但在ajax调用触发之前不能在任何webkit浏览器中工作.

webkit是否存在问题并动态更改内联和块样式？

CSS:

.portraitCustomStats .StatsRow .wrapStat {
    display: block !important;
}
.landscapeCustomStats .StatsRow .wrapStat {
    display: inline !important;
}

JavaScript的:

$(window).bind('orientationchange', function (anOrientationEvent) {
    if ($(window).width() > 600) return;
    $("#CustomStats").attr("class", anOrientationEvent.orientation.toLowerCase() + "CustomStats").trigger("updatelayout");
});

HTML:

<span id="CustomStats" class="portraitCustomStats">
    <tr class="StatsRow">
      <td class="description">Unique Visitors</td>
        <td class="stat">
          <span class="UniqueVisitors">
            <strong>
            <div class="wrapStat">
              <span class="pastStat">(1,318)</span>
                <img src="../../Images/up_arr.gif" alt="increase">
                <span class="increasedStat">85.43%</span>
            </div>
           </span>
        </td>
    </tr>
</span>

这里的代码的jsFiddle实际上不起作用......

http://jsfiddle.net/Hupperware/43eK8/5/

移动视图:http://jsfiddle.net/m/rat/

这适用于Firefox(文本在"横向"中变为红色,在"纵向"中变为蓝色,因此您知道它正在工作).在FF中,当您在更宽的视图和狭窄的视图之间进行时,它将显示内联和块.

在Webkit(Safari和Chrome)中,它不会......

Answer 1

我相信我已经找到答案了...

原来的：

<tr class="StatsRow">
     <td class="description">Total Sales</td>
     <td class="stat">
          <span class="TotalSalesRow">
               <strong>$59,549.16</strong>
               <div class="wrapStat">
                    <span class="pastStat">($59,799.66)</span>
                    <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease">
                    <span class="decreasedStat">0.42%</span>
               </div>
          </span>
      </td>
</tr>

当您尝试更改包含 div 的布局时，使用 span 包裹 div 似乎会导致 webkit 中发生不良操作。

更改：（第 2 个 td 下方的 div 标签）

<tr class="StatsRow">
     <td class="description">Total Sales</td>
     <td class="stat">
          <div class="TotalSalesRow">
               <strong>$59,549.16</strong>
               <div class="wrapStat">
                    <span class="pastStat">($59,799.66)</span>
                    <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease">
                    <span class="decreasedStat">0.42%</span>
               </div>
          </div>
      </td>
</tr>