1

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

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 选项卡上查看它时，在初始加载时，一切似乎都很好，但一旦我开始改变方向，事情就会变得奇怪。换成横屏时，显示全乱了，看起来文字重叠。看起来它正在显示以前的方向文本和当前的方向文本。如屏幕改变方向/调整大小但屏幕上的显示没有完全更新。

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

我不确定它在其他安卓平板电脑中的样子，因为我手边没有一台。

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

4

1 回答 1

0

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

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

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

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

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

于 2013-08-20T16:25:59.547 回答