Фоновое изображение TextArea исчезает за полосой прокрутки - HTML 5 - PullRequest
2 голосов
/ 08 ноября 2011

У меня проблема с фоновым изображением в ie8.Вот HTML-страница.Я тестирую в ie8.</p> <pre><code><!DOCTYPE html> <html> <HEAD> <TITLE>Test background icon</TITLE> <STYLE type=text/css> .ctNewIconOnlyTxt { background: url('images/icons/icon_test.gif') right top no-repeat !important; background-color: #F2F2F2; padding-right: 16px; } </style> </HEAD> <BODY> <LABEL>Description </LABEL> <TEXTAREA style="WIDTH: 565px; HEIGHT: 83px;" class="ctNewIconOnlyTxt" >testing for star icon for new </TEXTAREA> </BODY> </html>

Проблема в том, что фоновое изображение скрыто за полосой прокрутки текстовой области.если я удаляю тег DOCTYPE html , изображение отображается перед полосой прокрутки.Может кто-нибудь объяснить мне, в чем проблема и в чем может быть решение?

Ответы [ 3 ]

1 голос
/ 08 ноября 2011

Без объявления DOCTYPE веб-браузер отобразит страницу в режиме причуд.Это означает, что другой браузер будет интерпретировать эти теги нестандартным способом, обычно заканчивая тем, что испортил внешний вид.

Полоса прокрутки должна быть в верхней части фона текстовой области.(Это НАЗАД!)

Если вы хотите скрыть полосу прокрутки, укажите полосу прокрутки как невидимую.

textarea {
border : none;
overflow: hidden;
}

Другой способ - использовать iFrame вместо TextArea.

0 голосов
/ 18 июля 2014

Лучшим обходным путем, чем установка горизонтального фона в 96%, является ИМХО, чтобы установить его на 100% и изменить (изменить размер) самого изображения, чтобы количество пикселей было желательным в качестве отступа с правой стороны.

0 голосов
/ 08 ноября 2011

Вот что я сделал в качестве обходного пути: </p> <pre><code>.ctNewIconOnlyTxt { background: url('images/icons/icon_test.gif') 96% top no-repeat !important; background-color: #F2F2F2; }

Я изменил ключевое слово right с процентом 96% в моем случае, чтобы отобразитьзначок и не спрятаться за полосой прокрутки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...