1

テーブル要素の上にDIVを絶対配置することに問題があります。絶対位置を設定し、正確な場所を表示するようにトップ位置を設定する DIV があります。ズーム (ctrl +) 中に chrome ブラウザで何が起こったのか、ズーム レベル 125、150、175 ... などで DIV 位置が変更されました。問題は、DIV 位置が変更された 100 の倍数のズーム レベル以外にありました。この問題を解決するにはどうすればよいですか?
jsfiddle- demoにサンプルページを作成しました 。ページを chrome ブラウザーで実行し、ブラウザーをズーム (ctrl +) してください。赤色の DIV 位置が変更されます。これが問題です。誰かがこれに対する解決策を見つけることを本当に願っています。

HTML :

<div class="container">
<table width="700px" class="custom">
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
<div>
    <div class="apptest">    </div></div>

CSS :

    table
{
border-collapse:collapse;
}
.custom tr td
        {
            height:20px;
            border:1px solid;
           background-color:White;
        }

.container {
    position: relative;
}
        .apptest
        {
            height:70px;
            width:400px;
            position:absolute;
            top:185px;
            left:0px;
            background-color:Red;
        }

リンク : http://jsfiddle.net/mJcsb/5/

4

3 に答える 3

0

変化していたのはdivの位置ではなく、私たちの目がdivの位置に関連しているものです（この場合、各セルのテーブルの境界線）。

いろいろ試してみて分かったのですが、

この css を使用して、絶対位置 div が正確な位置にあることを確認します。

.custom tr td {
    height:20px;
    border:0px solid;
}
.container {
    position: relative;
    height:185px;
    background:#0F6;
}
.apptest {
    height:70px;
    width:400px;
    position:fixed;
    top:185px;
    left:0px;
    background-color:Red;
}

したがって、DIV の絶対配置に問題はありませんが、テーブル セルのレンダリングが異なる可能性があります。

于 2013-09-17T09:46:50.730 に答える
0

今回は、テーブルが不適切な選択であるかどうかについて議論するつもりはありません。しかし、ここでの絶対的な位置付けはかなり悪い考えです。

あなたが何をしなければならないのか、そしてあなたの目的は何なのかわかりませんが、divを使用して別の（そしておそらくより良い）解決策を持つことができます。その場合、「赤い」div を含む div には、.. それが含まれます。

とにかく絶対配置とテーブルを使用したい場合は、これが汚い解決策であり、いつでも壊れる可能性があることに注意してください。その場合は、パーセンテージ ベースの絶対配置を使用して、ボックスがズームと共に流れるようにすることをお勧めします (ちなみに、すべてのブラウザーで予測して正規化するのは困難です)。

すなわち

.apptest
    {
        height:70px;
        width:400px;
        position:absolute;
        top:61.2%;
        left:0px;
        background-color:Red;
    }

あなたのフォークは、絶対位置のパーセンテージをいじります（ここで悪い解決策の警告）：http://jsfiddle.net/U4TGd/

繰り返しますが、これは悪い解決策であり、パーセンテージとピクセルを混在させることはしばしば悪い考えであることに注意してください。時間や可能性がある場合は、テーブルベースのデザインを変換し、タブの代わりに div を使用してください。

于 2013-09-17T09:36:36.923 に答える
0

このようなスタイルのコンテナを使用してください。

.Container {
    margin-right: auto; 
    margin-left: auto;
    width: 500px;
}
于 2013-09-17T08:44:00.593 に答える