Поля ввода с прозрачным фоном не активируются в IE8 - PullRequest
Новая
       39

Поля ввода с прозрачным фоном не активируются в IE8

50 голосов
/ 20 января 2010

У меня есть абсолютно позиционированное поле ввода в форме.Поле ввода имеет прозрачный фон: 

.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 и поле ввода можно выбрать.Вы также можете нажать на поле выбора и сфокусировать поле ввода, нажав 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>

Ответы [ 14 ]

27 голосов
/ 20 января 2010

Я не могу воспроизвести такую ​​проблему в IE8. Полный тест? Вы уверены, что нет проблем с наложением слоев, при которых какой-либо другой прозрачный элемент покрывает область, реагирующую на клики?

Имеет ли значение background-image разницу? Как насчет прозрачного GIF?

ETA: Любопытно! На самом деле это ошибка IE7. Для меня ваш пример демонстрирует описанное поведение в IE7, но в IE8 это только в режиме EmulateIE7; в рендеринге IE8 это исправлено. Как правило, вам нужно убедиться, что вы не вернетесь к рендерингу IE7, используя подходящий X-UA-Compatible header / meta; однако, да, установка background-image в прозрачный GIF исправила проблему для меня. Тск, нам все еще нужен пустой GIF даже в наши дни, да?

8 голосов
/ 21 января 2010

Вы должны определить (прозрачное) фоновое изображение.

На всякий случай кому-то будет интересно. Один из предложенных обходных путей ....

7 голосов
/ 20 января 2010

Пожалуйста, включите HTML для элемента ввода.

Как вы определили элемент ввода?Код ниже работает в IE8 (IE 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>
6 голосов
/ 01 декабря 2010

Просто дайте в поле ввода прозрачное фоновое изображение, и оно будет работать ...

Пример: 

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
2 голосов
/ 25 февраля 2014

Я обнаружил ту же проблему при использовании IE10 в Windows 7. Оба следующих метода устранили эту проблему для меня.


Метод Фрэнки с использованием прозрачного фонового изображения ... 

background:url(/images/transparent.gif);


Метод Sketchfemme с использованием цвета фона rgba с непрозрачностью '0' 

background-color:rgba(0,0,0,0);


Предложение Джима Джефферса для редактирования z-index у меня не сработало.

2 голосов
/ 29 апреля 2010

Вот очень простой тестовый пример: 

<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');"/>
1 голос
/ 17 февраля 2014 
 background-image:url(about:blank);background-color:transparent;
1 голос
/ 12 марта 2011

Как заметил Бобинс, это ошибка IE7. Иногда мне было удобно решить эту проблему, добавив value=" &nbsp; &nbsp; &nbsp; ". Используйте столько неразрывных пробелов, сколько требуется, чтобы сделать область кликабельности достаточно большой. В зависимости от вашего приложения вам может потребоваться удалить их позже.

1 голос
/ 20 января 2010

IE в своей бесконечной мудрости решает не отображать элемент, потому что думает, что отображать нечего.Существует множество способов решения этой проблемы, но в основном вам нужно дать IE что-то, что можно пережить.

Добавление 'value = x' к самому тегу ввода определенно работает.Но, скорее всего, это не лучшее решение.Простой цвет: черный (без фокуса) позволяет элементу вкладываться в.Добавление ': focus' к стилю ввода позволяет элементу визуализироваться.

Попробуйте это: 

<!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>
0 голосов
/ 10 апреля 2013

это потрясающий вопрос. Я бы никогда не смог понять, что происходит без этого поста. Однако я решил использовать rgba(0,0,0,0) вместо прозрачного gif.

Страница:
...