Question

我在这个小提琴中有一个简单的表

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股票浏览器），因为它没有完全呈现表格。正如我的同事解释：有一个重绘标志或类似的东西，当你切换方向时，这个标志不会重置，因此它不能完全重绘。要解决这个问题，只需按下元素并检查它的高度即可显示。使用jquery这是一个非常简单的过程

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

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

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

Android平板电脑（三星Galaxy标签） - 表格会改变方向

1 个答案: