#css #internet-explorer #firefox #internet-explorer-8 #cross-browser
#css #internet-explorer #firefox #internet-explorer-8 #кроссбраузерный
Вопрос:
У меня есть несколько полей ввода, которые получают разные результаты из разных браузеров. Вот css для ящиков:
.InputBox
{
background-image: url(../text_field.png);
height: 25px;
width: 192px;
z-index:300;
position:absolute;
border: 0;
padding: 0 0 0 3px;
background-color:transparent;
font-size: 12px;
}
Я предполагал, что для того, чтобы курсор соответствовал размеру / расположению текстового поля, мне нужно будет только добавить padding
и font-size
вызовы. К сожалению, это не тот случай. На данный момент вот проблемы, с которыми я сталкиваюсь в браузере
Chrome Отсутствует
Safari Нет
В IE8 курсор перемещен на высокий уровень, не отображается перед полем, пока не будет введен текст. Текст располагается не по центру, а ближе к верху
Размер курсора в Firefox слишком велик, когда текст не вводится. После ввода текста курсор в порядке. Если текст удален, курсор становится слишком большим.
Как настроить начальный размер курсора в Firefox? Я предполагал, что это будет соответствовать font-size
, но я думаю, что это не так. Кроме того, как я мог бы настроить padding
в IE, не изменяя его в других, и почему курсор будет отображаться за текстовым полем, когда текст не введен?
Ответ №1:
Это ошибка, которую я исправил в Firefox 4. В Firefox 4 размер курсора всегда равен размеру текста, который будет введен. Мы берем этот размер из свойства font-size. В Firefox 3.6 и более ранних версиях размер определяется высотой блока, содержащего курсор, если внутри него нет текста.
Комментарии:
1. Я думал, что это основано на высоте. Единственная проблема заключается в том, как мне отредактировать высоту, не удаляя часть моего текстового поля? Это
background-image
так что уменьшение высоты приведет к удалению части поля2. Вы можете попробовать уменьшить
height
и компенсировать правильное положение, настроивmargin
(наиболее вероятноmargin-top
) свойство.