当我在浏览器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>
最佳答案
至于发生了什么:似乎浏览器正在通过更改#photo
上边框的宽度来补偿缩放级别。
67%缩放:
50%缩放:
至于如何解决呢?除非非常需要能够进行这样的缩放,否则我不会担心,因为要确保正确缩放所有缩放比例,需要进行很多工作。
关于html - 为什么浏览器缩小时div会移动?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17177988/