Поля ввода с прозрачным фоном не активируемы по щелчку в IE8
У меня есть абсолютно расположенное поле ввода в форме. Поле ввода имеет прозрачный фон:
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
Удивительно, я не могу выбрать это поле ввода путем нажатия на него в IE8. Это работает отлично в Firefox как бы то ни было. То же происходит для background: none. Когда я изменяю цвет фона:
background-color: red;
Это хорошо работает, таким образом, это - проблема, связанная с прозрачным фоном. Установка границы делает поле ввода можно выбрать путем нажатия на его границу только.
Существует ли обходное решение, чтобы иметь активируемое по щелчку поле ввода с прозрачным фоном, работающим в IE8?
Обновление: пример. Некомментарий background-color и inputbox можно выбрать. Можно также нажать на избранное поле и сфокусировать поле ввода путем нажатия Shift+Tab.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"] {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
7 ответов
Я не могу воспроизвести такую проблему в IE8. Полный тестовый случай? Вы уверены, что нет проблем наоборот, не вызывая какого-либо другого прозрачного элемента для покрытия области кликабельной связи?
Установка Фоновое изображение Сделать разницу? Как насчет прозрачного GIF?
ETA: Любопытно! Это на самом деле ошибка IE7. Для меня ваш пример демонстрирует описанное поведение в IE7, но в IE8 это только тогда, когда в режиме Emulousie7; В IE8 родном рендеринге он фиксируется. Вы, как правило, хотите убедиться, что вы не отступаете к рендерингу IE7 с помощью подходящего X-UA-совместимого заголовка / мета; Однако да, устанавливая фоновое изображение к прозрачному GIF Исправлена проблема для меня. TSK, нам все еще нужны пустые GIF даже в этот день и возраст, а?
Это может показаться странным, но вы должны попробовать явно указывать Z-индекс элементов, связанных с элементами. Это должно привести к входу для визуализации на верхней части элемента с помощью цвета фона / образующимся к нему.
Т.е. в его бесконечной мудрости выбирается не оказывать предмет, потому что он думает, что оказывает нечего. Есть много способов устранить это, но в основном вам нужно дать то, что нужно что-то жевать.
Добавление «значение = X» на входной тег определенно работает. Но более чем вероятно, это не самое лучшее решение. Простой, цвет: черный (без фокуса) позволяет элементу быть вкладками. Добавление «: фокус» в входной стиль позволяет элементу рендер.
Попробуйте это:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"]:focus {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
Вы должны определить (прозрачное) фоновое изображение.
На всякий случай кто-то будет заинтересован. Одно из предложенных обходных путей ....
Пожалуйста, включите HTML для входного элемента.
Как вы определили входной элемент? Код ниже работает в IE8 (т.е. 8.0.7600 Windows). Я попробовал это в IE8 и смог «выбрать» область ввода просто отлично.
<html>
<head>
<style>
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
</style>
</head>
<body>
<input type="text" name="test" value="test" id="test"/>
</body>
</html>
Вот очень простой тестовый пример:
<html>
<head>
</head>
<body style="direction: ltr;">
<br/><br/><br/>
<INPUT style="WIDTH: 100%;" />
<DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
<INPUT style="WIDTH: 100%; background-color: transparent;"/>
</DIV>
</body>
</html>
При работе в IE8 - вы должны увидеть фокус на нижележащем текстовом поле, а не на абсолютно позиционированном текстовом поле.
Нашим решением было установить как прозрачный цвет фона, так и прозрачное фоновое изображение:
<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
Кажется, что даже с уловкой с прозрачным gif, если вы установите background: transparent в любом другом месте вашего CSS для реальных веб-браузеров, это вызовет ошибку IE7, и вы не получите курсор при наведении и не может легко щелкнуть в поле ввода.