由于每X秒钟通过ajax调用替换完整的文本块,因此在wrapStat类本身上放置样式将不起作用。根据方向,我在父级#CustomStats类之间更改portraitCustomStats和landscapeCustomStats。
这适用于Firefox(调整浏览器大小将翻转方向标志),但在任何Webkit浏览器中都无法工作,直到ajax调用触发为止。
是否存在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 中可以正常工作(文本在“横向”时变为红色,在“纵向”时变为蓝色,以便您知道它正在工作)。在 Firefox 中,当您在更宽的视图和较窄的视图之间切换时,它将显示为内联和块状...
但在 Webkit(Safari 和 Chrome)中则不会...