Android平板电脑（三星银河标签）-方向改变时桌子混乱

Question

我在这个小提琴中有一张简单的桌子

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;
}

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

我的平板电脑是使用库存浏览器的android 4.0.4。

我不确定其他Android平板电脑的外观如何，因为我没有任何方便。

有没有办法纠正这种行为？ 还是其他人可以确认这不是在其他设备上发生的？ 我愿意接受js / jquery解决方案

Answer 1

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

问题在于webkit浏览器（如android stock浏览器），因为它无法完全呈现表格。 正如我的同事所解释的：存在重绘标志或类似的东西，并且当您切换方向时，该标志不会重置，因此不能完全重绘。 为了解决这个问题，只需隐藏元素并检查其高度，然后显示即可。 使用jQuery，这是一个非常简单的过程

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

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

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