Ошибка несоответствия Textarea в Firefox и Chrome

У меня есть дополнение к элементу textarea, и я хотел бы, чтобы содержимое оставалось заполненным, когда вы прокручиваете текстовое поле. Он работает как ожидается в Firefox, но не в Chrome. На рисунке ниже показана разница в выходе:

enter image description here

CSS

textarea { 
    width: 250px; 
    height: 160px; 
    padding: 15px; 
    font-family: Arial; 
    font-size: 12px; 
    line-height: 18px; 
    border: 1px solid #CCCCCC; 
    overflow: auto; 
    resize: none;
}

В Chrome верхнее и нижнее заполнение отображаются только в начале и в конце текстового содержимого. Ниже приведен пример jsfiddle:

http://jsfiddle.net/LkE6f/

Как сделать добавление в Chrome появляться/отображать так же, как в Firefox?

ОТВЕТЫ

Ответ 1

Вы можете сделать что-то вроде этого, оно не очень гибкое (фиксированная ширина), но вы можете расширить его. Он исправляет проблему в Chrome и не прерывает Firefox. Он использует псевдоэлементы на #container, которые работают в IE8 +

textarea {
    width: 250px;
    height: 160px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    overflow: auto;
    resize: none;
    display: block;
}
#container:before, #container:after {
    display: block;
    height: 15px;
    background-color: #FFF;
    position: absolute;
    left: 1px;
    width: 225px;
    content:'';
}
#container:before {
    top: 1px;
}
#container:after {
    bottom: 6px;
}

Здесь jsFiddle.

Обновление: Добавлено display: block в textarea, чтобы исправить проблему позиционирования IE.

Обновление 2: Альтернативное решение, которое берет свою ширину из div #container и для которого вам нужно установить значение right в зависимости от ширины полосы прокрутки браузера, в настоящее время значение 17px в Chrome доступно. Про с этим решением состоит в том, что вы можете установить ширину textarea на что угодно, изменив ширину #container, и псевдоэлементы будут масштабироваться соответствующим образом. jsFiddle.

#container {
    width: 260px;
    margin: 20px auto;
    position: relative;
}
textarea {
    width: 100%;
    height: 160px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    overflow: auto;
    resize: none;
    display: block;
}
#container:before, #container:after {
    display: block;
    height: 15px;
    background-color: #FFF;
    position: absolute;
    left: 1px;
    right: 17px;
    content:'';
}
#container:before {
    top: 1px;
}
#container:after {
    bottom: 1px;
}

Ответ 2

Лучший ответ:

Объявите разницу между браузерами; веб-сайт не является однородным, и ваш дизайн никогда не будет на 100% идентичным в браузерах.

Общайтесь с ответами:

Если вы не заботитесь о том, чтобы полоса прокрутки имела пробел сверху и снизу, вы можете использовать границы и схему, подобную этой.

ИЛИ

Это может быть достигнуто с помощью псевдоэлемента, если вы счастливы обернуть каждый textarea в div. Должен отображаться корректно на IE8 +, FF и Chrome.

Есть скрипка!

HTML

<div class="textareaWrap">
    <textarea>Content</textarea>
</div>

CSS

textarea {
    position: relative;
    width: 250px;
    height: 160px;
    font-family: Arial;
    padding: 15px;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    resize: none;
}
.textareaWrap {
    position: relative;
}
.textareaWrap:after {
    position: absolute;
    content:'';
    display: block;
    width: 232px;
    height: 15px;
    background: #FFF;
    z-index: 1;
    bottom: 5px;
    left: 1px;
}
.textareaWrap:before {
    position: absolute;
    content:'';
    display: block;
    width: 232px;
    height: 15px;
    background: #FFF;
    z-index: 1;
    top:1px;
    left: 1px;
}

Ответ 3

Попробуйте решение ниже для текстового поля

textarea {
   -moz-appearance: textfield;
   -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
   -moz-user-select: text;
   background-color: -moz-field;
   border: 2px inset threedface;
   color: -moz-fieldtext;
   cursor: text;
   font: -moz-field;
   width:250px;
   height:150px;
   letter-spacing: normal;
   line-height: normal !important;
   padding: 1px 0;
   text-align: start;
   text-indent: 0;
   text-rendering: optimizelegibility;
   text-shadow: none;
   text-transform: none;
   word-spacing: normal;
 }

Ссылка на ссылку Ссылка

Отношения Mahadevan

Ответ 4

Используйте проценты вместо пикселей. В вашем случае это будет padding:1%;.