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;
}

同样，当用户的浏览器与我的浏览器具有相同的缩放级别时，一切正常，但如果没有用户出错，则为第二种形式安排按钮。

更新：请参阅this示例。即使在JSFiddle中，渲染环境按钮位置也会在Firefox中更改缩放级别时更改。

Answer 1

实际问题在于按钮，该按钮是依赖于浏览器/操作系统的元素。并且您不以像素为单位提供特定的高度/宽度。

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

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

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

input
{
    height: 24px;
}

当然你应该在这里添加更多属性。

Answer 2

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

定位不同缩放级别的表单

2 个答案: