0

ブラウザの Chrome でズームアウトすると、 が下にinfo_table移動します。なぜこれを行うのですか？また、 に追加overflow: auto;するsectionと移動します。私に何ができる？

Jsfiddle http://jsfiddle.net/PbwS8/3/

CSS

*{  
    font-size:100%;
    margin: 0px;
    padding: 0px;
} 

body{
    width: 100%;
}

#info_table{
    float: left;
    width: 480px;
    margin: 40px 0px 0px 16px;
    border-spacing: 0px 0px;
}

#left{
    float:left;
    margin: 60px 0px;
}

#photo{
    float: left;
    width: 176px;
    height: 176px;
    border: 1px solid black;
}

#section{
    margin: 160px auto 0px;
    width: 675.2px;
    height: 320px;
    #overflow: auto;
    #border:1px solid black;
}

#choosephoto{
    width: 64px;
}

#submitwords{
    width: 72px;
    height: 28px;
    margin-left: 104px;
    #border:1px solid purple;
}


#wrapper{
    display: block;
    box-shadow: 3px 10px 5px #888888;
    margin: 0px auto;
    margin-top: 48px;
    width: 1024px;
    height: 960px;
    overflow: auto;
    background:white;
}

HTML 

 <div id="section">
            <body>
            </body>
            <form>
                <div id="left">
                    <div id="photo">

                    </div>
                    <br/>
                    <input type="file" id="choosephoto" name="uploadphoto"/>
                </div>
                <table id="info_table">
                    <tr>
                        <td>Name:</td> 
                    </tr>
                    <tr>
                        <td><input/></td>
                    </tr>
                    <tr>
                        <td>Info:</td> 
                    </tr>
                    <tr>
                        <td><textarea></textarea></td>
                    </tr>
                    <tr>
                        <td><button type="submit" id="submitwords">Update</button></td>
                    </tr>
                </table>
            </form>
        </div>
4

3 に答える 3

1

これは、widthfor のinfo_table設定が に対して広すぎるためsection widthです。

たとえば、幅を小さくするinfo_tableと、これが緩和されます。したがって、次のように置き換えてみてください。

#info_table{
    float: left;
    width: 460px;
    margin: 40px 0px 0px 16px;
    border-spacing: 0px 0px;
}

そうは言っても、グリッドシステム（ 960.gsなど）の使用について読んだほうがよいでしょう。

于 2013-06-18T20:20:10.223 に答える
1

何が起こっているかについて: ブラウザが の境界線の幅を変更することで、ズーム レベルを補正しているよう#photoです。

67% ズーム:

ここに画像の説明を入力

50% ズーム:

ここに画像の説明を入力

それを修正する方法は？このようにズームできることがどうしても必要な場合を除き、心配する必要はありません。すべてが正しくスケーリングされるようにするのは大変な作業だからです。

于 2013-06-18T20:25:35.860 に答える