Вопрос по css, html5, html, jquery, css3 – проблема с курсором текстового поля в Chrome

8

Я использую следующие CSS в моем разделе формы.

Screenshot of form fields

CSS

.username input{
 background-color: #FFFFFF;
 border: 2px solid #DDDDDD;
 border-radius: 5px 5px 5px 5px;
 color: #9E9E9E;
 height: 30px;
 width: 330px;
 padding:0px 10px 0px 0px;
 padding-left:10px;
 margin:15px 0px 0px 0px;
 line-height:30px;
}

Работает нормально во всех браузерах. Но в Chrome курсор отображается на той же высоте входного тега. Я нашел решение, если я удалюline-height он отображается так, как я хочу. Но в IE значения находятся в верхней части поля. Мне нужно решение этой проблемы.

Пожалуйста, посмотритемоя скрипка, [Это не хорошо в хроме]

Если я не нашел решения, я буду использовать этот хак IE css. Большое спасибо designersvsoft
только что добавил ответ, который не использует CSS-хакерство, чтобы исправить это в разных браузерах, см. ответы ниже Adrien Be
Если вы не против использования CSS-хаков, вы можете настроить таргетинг на IE8 и ниже, используя:line-height: 30px\9 My Head Hurts

Ваш Ответ

5   ответов
8

Удалятьline-height Атрибут из вашего класса CSS, я думаю, это поможет вам
обновленная скрипка:http: //jsfiddle.net/4Etyn/16

<div class="username">
    <input name="txtFullName" id="txtFullName" type="text" class="user" value="Username" onBlur="if(this.value=='') this.value='Username'" onFocus="if(this.value =='Username' ) this.value=''"  />
</div>

.username input{
    background-color: #FFFFFF; 
    border: 2px solid #DDDDDD;
    border-radius:5px;            
    color: #9E9E9E;
    height: 30px; 
    height: 22px\0/; 
    width: 330px; 
    padding:0px 10px 0px 10px; 
    padding:8px 10px 0px 10px\0/;  
    margin:15px 0px 0px 0px;
    vertical-align:middle;
}
:root .username input{
    height: 30px\9;
    padding:0px 10px 0px 10px\9;
}
ОП уже попробовал это, как указано. Barry Kaye
@ BarryKaye вы можете увидеть мою скрипку один раз, после удалениявысота лини атрибут, он работает нормально Valli69
Пожалуйста, проверьте эту скрипку в IE8. designersvsoft
@ designervsoft проверьте мою обновленную скрипку один раз Valli69
Спасибо, это работает во всех браузерах. designersvsoft
6
Актуальный ответ (октябрь 2014 г.)

эталонные" проекты, я понял одну вещь: мы делаем это неправильно.

Короче говоря: для надежного и чистого кросс-браузерного решения один не должен использовать line-height свойство, чтобы сделатьinput type="text" элемент выше, а скорееpadding свойство

Перекрестные проблемы с браузером

Как указано в вопросе, браузеры интерпретируютline-height свойство дляinput type="text" элемент по-разному.

В этом случае для Chrome тогда, в 2012 году и даже до сих пор в октябре 2014 года (версия 37), это для позиции курсора.

Обратите внимание, что связанная ошибка была подана в июне 2010 года,https: //code.google.com/p/chromium/issues/detail ID = 47284, но затем закрыт как устаревший (кто знает почему?): но при условии живой репликации ошибок,http: //jsbin.com/avefi/, все еще показывает ошибку Chrome на момент написания (октябрь 2014 г. - Chrome 37).

Обратите внимание, чтоValli69твет @ также определенline-height свойство как источник проблемы. Но затем использовал некоторые довольно хакерские / грязные / рискованные исправления IE8 и IE9 (с\0/ а также\9). Смежный вопрос по этой технике на Ie8 CSS Hack - лучший метод?

Как насчет НЕ использоватьline-height ниheight свойство

Это простое решение и поддерживается даже современными и старыми браузерами!

1) Решение в упрощенном примере

/* 
 * [1] overrides whatever value "line-height" property was given by any other selector
 *     note: make it "line-height: normal !important;" if necessary
 * [2] overrides whatever value "height" property was given by any other selector
 *     note: make it "height: auto !important;" if necessary
 */
.username {
  line-height: normal;  /* [1] */
  height: auto;  /* [2] */
  padding-top: 10px;
  padding-bottom: 10px;
}
<input class="username" type="text" placeholder="Username" />

Прямая демонстрацияhttp: //jsbin.com/yadebenoniro/1/edit HTML, CSS, выход (ps. тест на IE8, используя этот URLhttp: //jsbin.com/fugegalibuha/ )

Проверено на Windows OS on: IE8 +, IE11, Chrome 38 и Firefox 32.

2) Решение в контексте вопроса

/*
 * [1] overrides whatever value line-height property was given by any other selector
 *     note: make it "line-height: normal !important;" if necessary
 * [2] overrides whatever value "height" property was given by any other selector
 *     note: make it "height: auto !important;" if necessary
 *
 * [3] use the padding-top, padding-bottom to adjust the height of your input type text
 * [4] keep in mind that when changing the font-size value you will have to adjust the padding top and padding bottom if you want to keep the same height as previously
 */
.username input {
  background-color: #FFFFFF;
  border: 2px solid #DDDDDD;
  border-radius: 5px;
  color: #9E9E9E;
  height: auto;  /* [2] */
  line-height: normal;  /* [1] */
  margin: 15px 0px 0px 0px; 
  padding: 10px 5px 10px 5px;  /* [3] */
  width: 330px;
  font-size: 20px;  /* [4] */
}

Прямая демонстрацияhttp: //jsbin.com/busobokapama/1/edit HTML, CSS, выход (ps. тест на IE8, используя этот URLhttp: //jsbin.com/busobokapama/ )

Проверено на Windows OS on: IE8 +, IE11, Chrome 38 и Firefox 32.

3) Дальнейшие объяснения

Эта идея пришла ко мне после взгляда наФон: он используетheight а такжеpadding свойства только:line-height свойство оставлено по умолчанию Брауэр предоставленный значение, то естьline-height: normal.

Смотрите сами: осматриваяinput type="text" elements На демонстрационной странице компонента формы Фонда http://foundation.zurb.com/docs/components/forms.htm

Единственное, что даже "просто" используетheight а такжеpadding кажется проблемой для IE8, поэтому я решил даже удалитьheight свойство

Выво

Это решение, очевидно, имеет огромное преимущество простого кода, который "просто работает" во всех браузерах.

Но у него также есть недостаток, который НЕ позволяет вам полностью контролировать рассчитывается общая высота: свойство вычисляемой высоты (размер шрифта + произвольное количество пикселей) + верхний отступ + нижний отступ + (ширина границы x 2). «Свойство вычисленной высоты» кажется, варьируется от браузера к браузеру, следовательно "произвольное количество пикселей" называя.

Вам решать, что вам больше нравится: простой код или точный дизайн.

Ресурсhttps: //developer.mozilla.org/en-US/docs/Web/CSS/heighhttps: //developer.mozilla.org/en-US/docs/Web/CSS/line-heighHTML: поле ввода по умолчанию / расчетная высота содержимого различны для разных браузеров
note: я только что заново создал проблему для Chrome Code.google.com / р / хром / вопросы / детали? ID = 424606 потому что оригинал 2010 года был закрыт без исправления в июне 2010 года, см. Code.google.com / р / хром / вопросы / детали? ID = 47284 Adrien Be
Этот ответ великолепен и заслуживает одобрения! Благодарность Claus Conrad
1

которое работает в последних версиях Chrome и Firefox, а также в IE 8 и 9. Я не тестировал другие браузеры, потому что мне не нужно было поддерживать что-либо ниже IE 8.

<input class="issue" type="text" />
<input class="solution" type="text" />

.issue {
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  padding: 0 10px;
  vertical-align: top;
}

.solution {
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  padding: 15px 10px;
}

посмотрите демо-версию наhttp: //jsbin.com/usimeq/

Редактировать: забыл добавить, что первый вход показывает проблему, второй показывает решение.

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

Надеюсь, это поможет кому-то еще столкнуться с этой надоедливой проблемой.

Использование внешних ссылок для источника неудобно - что, если он исчезнет или изменится? В идеале весь необходимый код должен быть в ответе. user289086
К сожалению, в Firefox 21 нижняя часть некоторых букв обрезается вашим решением (например, g). Geoff
0

line-height:30px; сheight:30px; у тебя jsFiddle сработал.

Да, это правильно. Но в браузере ie значения будут идти сверху поля. designersvsoft
Не для меня в IE9 - какую версию IE вы используете? Barry Kaye
IE8 и IE7 .... designersvsoft
0

которые будут выровнены в IE8 и не будут показывать гигантский курсор в Chrome.

line-height: 14px/*to enclose 13px font, override this if needed*/;
height: 14px/*to enclose 13px font, override this if needed*/;
/*Padding is needed to avoid giant cursor in webkit, which we get if
height = line-height = 22px.*/
padding: 6px 8px;

Похожие вопросы