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

Samsung Galaxy タブで表示すると、初期ロード時にすべて問題ないように見えますが、方向を変更し始めると、状況が奇妙になります。横向きにすると表示がめちゃくちゃで、文字が重なって見える。以前のオリエンテーション テキストと現在のオリエンテーション テキストが表示されているようです。画面の向き/サイズが変更されましたが、画面の表示が完全に更新されませんでした。

私のタブレットは Android 4.0.4 で、ストック ブラウザを使用しています。

手持ちの Android タブレットがないため、他の Android タブレットでどのように表示されるかはわかりません。

この動作を修正する方法はありますか? または、これが別のデバイスで発生していないことを他の人が確認できますか? もしあれば、私はjs/jqueryソリューションにオープンです

4

1 に答える 1

0

私はここでこれに答えているので、他の誰かが同じことに遭遇した場合、より簡単な時間を過ごすことができます

問題は、テーブルを完全にレンダリングしない Webkit ブラウザー (android ストック ブラウザーなど) にあります。私の同僚が説明しているように、再描画フラグなどがあります。方向を切り替えても、このフラグはリセットされないため、完全に再描画されません。これを解決するには、単に要素を表示し、その高さを確認してから表示します。jqueryを使用すると、非常に簡単なプロセスになります

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

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

チェーン化してもうまくいく可能性が高く、簡単にフォローできるように2行にまとめています。ツールチップを表示するときにデスクトップ クロムでもこれを見たことがありますが、同じことで問題が解決します。

于 2013-08-20T16:25:59.547 に答える