проблема абсолютного позиционирования firefox - PullRequest
Новая
       8

проблема абсолютного позиционирования firefox

4 голосов
/ 30 марта 2011

У меня проблемы с рендерингом этого корректно в Firefox. Это хорошо выглядит в хром и сафари. 

<div style="" id="login_inline">
    <form accept-charset="utf-8" action="/users/login" method="post" id="UserLoginForm">
    <div style="display:none;">
        <input type="hidden" value="POST" name="_method">
    </div>
    <input type="text" id="UserDummyEmail" tabindex="1" value="Email" name="data[User][dummyEmail]" style="display: block;">
    <input type="text" id="UserDummyPassword" tabindex="2" value="Password" name="data[User][dummyPassword]" style="display: block;">
    <input type="text" id="UserEmail" maxlength="255" tabindex="3" name="data[User][email]">
    <input type="password" id="UserPassword" tabindex="4" name="data[User][password]">
    <div class="submit">
        <input type="submit" value="Login">
    </div>
    </form>
</div>

CSS: 

#login_inline {
position:absolute;
right:10px;
top:30px;
width:420px;
}

.submit {
display:inline;
position:absolute;
left:360px;
}

#UserPassword {
position:absolute;
left: 185px;
}

#UserDummyPassword {
position:absolute;
left:185px;
z-index:1;
color:gray;
}

#UserDummyEmail {
position:absolute;
left:10px;
z-index:1;
color:gray;
}

#UserEmail {
position:absolute;
left:10px;
}

Рендеринг Firefox:

Firefox rendering

Рендеринг Chrome:

enter image description here

РЕДАКТИРОВАТЬ: Живой пример (Правильный рендеринг)

Ответы [ 2 ]

8 голосов
/ 30 марта 2011

Позиционируя абсолют, вы становитесь зависимыми от правильной ширины входных элементов. Это трудно сделать кросс-браузер, потому что браузеры, как правило, используют пользовательские или нативные элементы, которые не согласованы по стилю. Вам лучше использовать встроенный блок или плавающий макет, который обрабатывает непостоянную ширину.

Если вам действительно нужно сделать это таким образом, есть некоторые хаки, использующие свойство css3 box-sizing и / или вручную настраивающие свойства, такие как высота строки, размер шрифта и отступы, чтобы заставить все браузеры согласовать размер ввода, но это сложнее, чем это звучит.

Этот вопрос содержит некоторую информацию о box-sizing и использовании процента / автоматической ширины для получения согласованности: ввод с отображением: блок не является блоком, почему бы и нет?

РЕДАКТИРОВАТЬ: Исходя из вашего комментария выше, вам может потребоваться настроить некоторые div-обертки, чтобы установить размер / положение как скрытых, так и видимых элементов, а затем использовать ширину в процентах и ​​box-sizing, как объяснено. 

<div class="input_wrapper" style="width:100px;position:relative">
    <input style="width:100%;box-sizing:border-box;position:absolute">
    <div class="fake_input" style="width:100%;position:absolute">
</div>

Ключ ко всему этому заключается в том, что box-sizing:border-box менее восприимчив к различиям в браузере при заполнении и вычислениях границ при вводе формы.

0 голосов
/ 31 марта 2014

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

...