Расположение форм для различных уровней увеличения масштаба изображения

Пожалуйста, помогите к правильно расположению двум формам. Я использую подход положения, но он терпит неудачу, когда браузер уровень Увеличения масштаба изображения изменяется. Вторая кнопка перемещена немного или вниз. Вот мой код:

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

Снова, все в порядке, когда у браузера пользователя есть тот же самый уровень увеличения масштаба изображения как мой, но если не пользователь получает неправильную устроенную кнопку для второй формы.

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

0
добавлено отредактировано
Просмотры: 2
nl ja de
@ChristianVarga I' m боящийся не - снимки экрана can' t быть сделанным для нашего не бесплатным продуктом. Но я думаю I' ve, письменный понятный. Кнопка для второй формы будет перемещена вверх или вниз после Изменения масштаб изображения страницы. Если та помощь я использую Firefox, но имею ту же самую проблему в Chrome также.
добавлено автор Michael Z, источник
@Chanckjh я имею в виду увеличение масштаба изображения, которое я использую, может быть НЕ тем же самым как user' s. Больше по я вижу кнопки неправильные положения в различных браузерах, таким образом, это - больше общего вопроса относительно правильного подхода расположения для форм/кнопок.
добавлено автор Michael Z, источник
Хорошо, посмотрите это jsfiddle.net/B4SeR Даже в JSFiddle предоставление положений кнопок окружающей среды изменяется, в то время как уровень Увеличения масштаба изображения изменяется в Firefox. Если it' s не для вас - I' m готовый сделать брошенный экраном для моего кода в окружающей среде JSFiddle:)
добавлено автор Michael Z, источник
люди обычно don' t используют увеличение масштаба изображения. Можно перезагрузить увеличение масштаба изображения с ctrl+0 или cmd+0
добавлено автор Chanckjh, источник
В котором браузере? Можете вы обеспечивать демонстрационный пример what' s на самом деле происходящий? Вы можете попытка обнаружить увеличение масштаба изображения браузера, но я wouldn' t рекомендуют его.
добавлено автор Christian Varga, источник
Хорошо как общий ответ, изменяя увеличение масштаба изображения обычно doesn' t затрагивают расположение. В зависимости от браузера, конечно, потому что изменение размера текста делает , изменяют расположение полностью и that' s, что делают старые браузеры. Это не имеет никакого отношения к формам/кнопкам или чему-либо еще. Поскольку я упомянул, не видя некоторый код, народ, примеры, или который браузер you' ре, относящееся также, we' ре в значительной степени понятия не имеет, какова ваша проблема на самом деле.
добавлено автор Christian Varga, источник

2 ответы

Фактическая проблема с кнопкой, которая является элементом БРАУЗЕРА/ЗАВИСИМЫМ ОТ ОПЕРАЦИОННОЙ СИСТЕМЫ элементом. И вы не поставляете определенную высоту/ширину ему в пикселях.

Так как ваша проблема определенно касается вертикального размещения, , необходимо будет определить высоту к входным элементам: высота: 24 пкс; .

Таким образом мое заключение состоит в том, что больше свойств (ширина рамки, высота/ширина и т.д.) вы определяете в определенных суммах, таким образом проценты или пиксели, более последовательное, которым ваше расположение будет для различных уровней увеличения масштаба изображения в браузерах.

Можно определить высоту по умолчанию для всех исходных данных в CSS при помощи (как вопрос примера):

input
{
    height: 24px;
}

Конечно, необходимо добавить больше свойств здесь.

0
добавлено
Хорошо спасибо. На самом деле ваше решение почти осуществимый. Пожалуйста, посмотрите это jsfiddle.net/ND6Eb для самого маленького Увеличения масштаба изображения (возможно, не наиболее также) вторая кнопка будет меньше высотой, что первое и наложится на первое (проверенный в Firefox). Есть ли некоторое решение для этого?
добавлено автор Michael Z, источник

Когда выполнение форм пытается использовать Моноширинные шрифты, иначе изменение масштаб изображения может сделать, некоторые элементы сходят с ума.

0
добавлено