javascript - Android 平板电脑(Samsung 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;
}

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

我的平板是android 4.0.4，用的是stock浏览器。

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

有没有办法纠正这种行为？或者其他人可以确认这不会在其他设备上发生吗？如果有的话，我愿意接受 js/jquery 解决方案

Answer 1

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

问题出在 webkit 浏览器(如 android stock 浏览器)上，因为它没有完全呈现表格。正如我的同事所解释的那样:有一个重绘标志或类似的东西，当你切换方向时，这个标志不会重置，所以它不会完全完美地重绘。要解决这个问题，只需隐藏元素并检查它的高度然后显示。使用 jquery 这是一个非常简单的过程

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

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

链接它很可能也有效，我只是把它分成两行，这样更容易理解。我在桌面 chrome 上也看到了这个，当显示工具提示时，同样的事情会解决这个问题。