さまざまなズームレベルのフォームの配置

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

<div id="container">
<form id="form1">
    
Some text here


<input name="submitName1" class="button" id="input1_id" value="Submit1" type="submit" />

</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番目のフォームの間違った配置ボタンを取得していない場合は、すべてOKです。

UPDATE: See this example. Even in JSFiddle rendering environment buttons positions are changed while Zoom level is changed at Firefox.

0
nl ru de
@ChristianVarga私は恐れていません - 私たちの無料製品ではスクリーンショットを作ることはできません。しかし、私は理解して書いたと思います。 2番目のフォームのボタンは、拡大/縮小ページの後に上下に移動します。それは私がFirefoxを使用しても、クロムでも同じ問題があります。
追加された 著者 Michael Z,
@Chanckjh私が使用するズームは、ユーザーのものと同じではないことを意味します。以上、私は異なるブラウザーでボタンの位置が間違っているのを見ることができます。これは、フォーム/ボタンの正しい配置方法に関するより一般的な質問です。
追加された 著者 Michael Z,
OK、これを見る jsfiddle.net/B4SeR JSFiddleレンダリング環境のボタンでも、ズームレベルが変更されている間に位置が変更されますFirefoxで。それはあなたのためではない - 私はJSFiddle環境で自分のコードのスクリーンキャストを作る準備ができている:)
追加された 著者 Michael Z,
人々は通常、ズームを使用しません。 Ctrl + 0またはcmd + 0でズームをリセットすることができます
追加された 著者 Chanckjh,
どのブラウザですか?実際に何が起こっているのかデモを提供できますか? ブラウザのズームを検出しようとすることができます。私はそれをお勧めしません。
追加された 著者 Christian Varga,
一般的な答えとして、ズームの変更は一般的にレイアウトには影響しません。もちろん、ブラウザによっては、テキストサイズを変更すると レイアウトが完全に変更されるため、これは古いブラウザの機能です。フォーム/ボタンなどとは関係ありません。私が言及したように、いくつかのコード、デモ、サンプル、またはあなたが参照しているブラウザを見ずに、私たちはあなたの問題が実際にどのようなものかほとんど分かりません。
追加された 著者 Christian Varga,

2 答え

実際の問題は、ブラウザ/ OSに依存する要素であるボタンの問題です。そして、ピクセル単位で特定の高さ/幅を指定しないでください。

あなたの問題は具体的には垂直配置に関するものなので、入力要素の高さを指定する必要があります: height:24px;

したがって、特定の量、つまりパーセンテージまたはピクセルで指定するプロパティ(枠線の幅、高さ/幅など)が多くなればなるほど、ブラウザーのさまざまなズームレベルのレイアウトがより一貫していることになります。

CSSのすべての入力に対してデフォルトの高さを指定することができます(例として)。

input
{
    height: 24px;
}

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

0
追加された
まあありがとう。実際、あなたのソリューションはほぼ実行可能です。最も小さいズームのためのこの jsfiddle.net/ND6Eb を見てください。最初のものが最初のものと重なり、最初のものと重なることになります(Firefoxでチェックされています)。これにはいくつかの解決策がありますか?
追加された 著者 Michael Z,

フォームを実行するときに、モノスペースフォントを使用してみてください。それ以外の場合、ズームすると要素が狂ってしまうことがあります。

0
追加された