В основном я хотел бы, чтобы диапазон и элемент ввода занимали одинаковое количество вертикального пространства, чтобы правильно выровнять текст в двух полях. Я могу добиться этого довольно легко, если не перемещаю элементы. Но как только я добавляю свойство float, к высоте входного элемента добавляются дополнительные пиксели. И я хоть убей не могу понять, почему это так.

И как мне это исправить?

Эта проблема существует в Safari на iOS 6 и Chrome на рабочем столе. То же самое происходит в Firefox, но эффекты несколько другие.

Я создал эту скрипку, которая показывает мою проблему.

<input class='float' value="some text" id='input2'/>
<span class='float' id='text2'>some text</span><br />

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    line-height: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}
6
oligofren 9 Апр 2013 в 19:44
1
Разве плавание пролета на самом деле не уменьшает его высоту? Все 17, но плавающий промежуток - 15.
 – 
dewyze
9 Апр 2013 в 19:52
Правда! Хорошо подмечено! Изменил название.
 – 
oligofren
10 Апр 2013 в 11:28

1 ответ

Лучший ответ

Две вещи. Кажется, что плавающий ввод дает ему поле в 2 пикселя, которое вы можете легко удалить. Если вы сделаете это и удалите атрибут line-height, все, похоже, выровняется по обоим параметрам.

http://jsfiddle.net/cYaa2/4/

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}

input.float {
    margin:0px;
}
2
dewyze 9 Апр 2013 в 19:56
Хм ... Награждаю вас ответом, поскольку вы действительно ответили на то, что я спросил. Жаль, что то, что я спрашивал, не соответствовало тому, что я хотел получить: p Исходная проблема проявлялась на iPhone, и я попытался воспроизвести ее с помощью приведенного выше фрагмента. Но, увы, оказалось, что это не одно и то же. В следующий раз я постараюсь немного усерднее создать эквивалентный фрагмент, который на самом деле , а не только на первый взгляд, воспроизводит проблему.
 – 
oligofren
14 Апр 2013 в 12:48
Ха-ха, извини! Если вы зададите новый вопрос, я постараюсь ответить на него, но я не так хорошо разбираюсь в iPhone.
 – 
dewyze
17 Апр 2013 в 05:30