Блог

Главная - Вопросы по программированию - Фоновое изображение текстовой области исчезает за полосой прокрутки — html 5

Фоновое изображение текстовой области исчезает за полосой прокрутки — html 5

#html

#HTML

Вопрос:

Я столкнулся с проблемой с фоновым изображением в ie8. Вот html-страница. Я тестирую в ie8. 

 <!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
 тег, то изображение будет отображаться перед полосой прокрутки. Не мог бы кто-нибудь объяснить мне, в чем проблема и каким может быть обходной путь?

Комментарии:

1. вот демонстрация: - jsfiddle.net/dev_tak/6AHNz/2

Ответ №1:

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

Полоса прокрутки должна располагаться поверх фона текстовой области. (Это фон!)

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

 textarea {
border : none;
overflow: hidden;
}

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

Комментарии:

1. Есть ли способ указать точное место в пикселях для фонового изображения.

Ответ №2:

Вот что я сделал в качестве обходного пути: 

 .ctNewIconOnlyTxt {   
    background: url('images/icons/icon_test.gif') 96% top no-repeat !important;
    background-color: #F2F2F2;
 }

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

Ответ №3:

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