安卓平板电脑(三星galaxy标签)-桌子在方向改变上搞砸了

Question

我在这个fiddle 中有一个简单的表

http://jsfiddle.net/FzSwP/3/

CSS

table {
    width: 100%;
}
td {
    padding: 10px;
    border: 1px solid #ccc;
}
.name {
    background: url("http://www.lexus.ca/images/footer/logo.gif") no-repeat right center transparent;
    padding-right: 40px;
    width: 20%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

当我在三星Galaxy选项卡上查看它时，在初始加载时，一切似乎都很好，但一旦我开始改变方向，事情就会变得奇怪。当切换到横向时，显示完全混乱，看起来文本重叠。它看起来像是在显示上一个方向文本和当前方向文本。与屏幕中一样，更改了方向/调整了大小，但屏幕上的显示没有完全更新。

我的平板电脑是安卓4.0.4，使用股票浏览器。

我不确定它在其他安卓平板电脑上是什么样子，因为我手边没有。

有没有办法纠正这种行为？或者其他人能确认这不是在其他设备上发生的吗？我对js/jquery解决方案持开放态度，如果有

Answer 1

我在这里回答这个问题，这样如果其他人遇到同样的事情，会更容易

问题在于webkit浏览器（像android股票浏览器一样），因为它没有完全呈现表格。正如我的同事所解释的：有一个重绘标志或类似的东西，当你切换方向时，这个标志不会重置，所以它不会完全重新绘制。要解决这个问题，只需抓住元素并检查其高度，然后显示即可。使用jquery是一个非常简单的过程

$('.element').hide().height();
$('.element').show();

http://jsfiddle.net/FzSwP/5/

把它链接起来很可能也会起作用，我只是把它放在两行中，这样更容易遵循。我在桌面chrome上也看到了这一点，当显示工具提示时，同样的事情也会解决这个问题。