html - 不同缩放级别的定位表格

Question

请帮助正确布局两个表格。我使用位置方法，但是当浏览器缩放级别更改时它会失败。第二个按钮稍微向上或向下移动。这是我的代码：

<div id="container">
<form id="form1">
    <p>Some text here</p>
    <p><input name="submitName1" class="button" id="input1_id" value="Submit1" type="submit" /></p>
</form>
<form id="form2"><input id="input2_id" value="Submit2" disabled="disabled" type="submit" /></form>
</div>

#form1 
{
    bottom: 15px;
    position: relative;
}

#form2 
{
    bottom: 50px;    
    left: 73px;
    position: relative;
}

同样，当用户的浏览器具有与我的浏览器相同的缩放级别时，一切正常，但如果不是，则用户会为第二种表单设置错误的按钮。

更新：见这个例子。即使在 JSFiddle 渲染环境中，按钮位置也会发生变化，而 Firefox 会更改缩放级别。

Answer 1

实际问题出在按钮上，它是一个与浏览器/操作系统相关的元素。而且您没有以像素为单位为其提供特定的高度/宽度。

由于您的问题专门与垂直放置有关，因此您需要为输入元素指定高度： height: 24px; .

因此我的结论是，您以特定数量（即百分比或像素）指定的属性（边框宽度、高度/宽度等）越多，您的布局对于浏览器中的不同缩放级别就越一致。

您可以使用（作为示例）为 CSS 中的所有输入指定默认高度：

input
{
    height: 24px;
}

当然，您应该在此处添加更多属性。

Answer 2

在制作表单时尝试使用等宽字体，否则缩放可能会使某些元素变得疯狂。