0

2 つのフォームを正しくレイアウトするのを手伝ってください。位置アプローチを使用していますが、ブラウザーのズームレベルが変更されると失敗します。2 番目のボタンはわずかに上下に移動します。これが私のコードです：

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

繰り返しますが、ユーザーのブラウザーが私のものと同じズーム レベルを持っている場合はすべて問題ありませんが、そうでない場合、ユーザーは 2 番目のフォームのボタンを間違って配置します。

更新:この例を参照してください。JSFiddle レンダリング環境でも、Firefox で Zoom レベルを変更すると、ボタンの位置が変更されます。

4

2 に答える 2

0

フォームを作成するときはモノスペース フォントを使用してみてください。そうしないと、ズームによって一部の要素がおかしくなることがあります。

于 2015-01-08T07:49:55.780 に答える
0

実際の問題は、ブラウザ/OS に依存する要素であるボタンにあります。また、特定の高さ/幅をピクセル単位で指定しません。

問題は特に垂直方向の配置に関するものであるため、入力要素に高さを指定する必要があります: height: 24px; .

したがって、私の結論は、特定の量、つまりパーセンテージまたはピクセルで指定するプロパティ (border-width、height/width など) が多いほど、ブラウザーのさまざまなズームレベルでレイアウトの一貫性が高まるということです。

(例として) 以下を使用して、CSS のすべての入力のデフォルトの高さを指定できます。

input
{
    height: 24px;
}

もちろん、ここにさらにプロパティを追加する必要があります。

于 2013-01-14T14:52:31.813 に答える