2

ここに私の問題があります: JSFiddle

table内に がありdiv、div幅は 50% です。テーブルは の幅の 100% を埋める必要がありdivます。

<div>
   <table>
       <tr>
           <td>Resize and see Pixel to the right -></td>
       </tr>
   </table>
</div>

CSS:

div {
   width: 50%;
   background: red;
}
table {
   width: 100%;
   background: rgb(255,255,255);
}

基本的に動作しますが、ブラウザのサイズを変更すると背景が見えてしまうことがありますdiv。divの幅は丸められませんが、の幅は丸められるためですtable。

例: div の幅が 315.5 ピクセルの場合 (幅が 50% であるため)、テーブルは幅として 315 ピクセルの幅のみを継承します。次に、ブラウザーは div を 316px に切り上げ、div をテーブルより 1px 広くします。このバグはChromeでのみ発生します。

どうすればこれを修正できますか?

4

1 に答える 1

0

これは私が他の設計設定で抱えていた問題であり、克服するのは難しく、まだ解決していません。何が起こっているかというと、Mac と PC でフォントをレンダリングする方法がおよそ 1px+ 異なります。

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

アップデート：

以下の会話を考慮して、必要に応じて div のサイズを変更する JS ファイルをまとめました。問題を再現できないため、うまくいくかどうかはわかりませんが、ここにあります。Mac で家に帰ってエラーが表示されたら、これを試してみたいと思っています。

function fixDiv() {
    var myDiv = document.getElementById("myDiv");
    var currentWidth = myDiv.offsetWidth;

    if (currentWidth % 2 != 0) {
        var newWidth = parseInt(currentWidth) + 1;
        myDiv.setAttribute("style", "width: " + newWidth + "px");
    }
}

window.onresize = function (event) {
    fixDiv();
}

fixDiv();
于 2013-02-22T19:01:46.447 に答える