IE CSS Ошибка: background-color: прозрачный ведет себя иначе, чем background-color: (любой другой цвет) - PullRequest
Новая
       4

IE CSS Ошибка: background-color: прозрачный ведет себя иначе, чем background-color: (любой другой цвет)

9 голосов
/ 22 октября 2010

Я изо всех сил пытался выяснить, почему этот ролловер не ведет себя так, как должен в IE8.

Перейдите сюда: http://baked -beans.tv в IE8, вы увидите, что ролловер работает только на нижней половине миниатюр.

Кстати, это не активируется тегом <a>, а :hover для <div>.

Что я не могу понять, так это то, что он работает только в нижней половине элемента div, под изображением, но не на изображении (изображение не проиндексировано по z, так что это не проблема)

Как только я заменяю background-color на что-либо еще, кроме прозрачного, он работает на 100%. Так что это просто поражает воображение ... почему нижняя половина, а не верхняя половина, и только когда я установил прозрачность для bg-color ?! Должен любить Internet Explorer.

Это работает как и во всех других браузерах (весь квадрат действует как опрокидывание)

Вот CSS: 

.cat_rollout {
    position: absolute;
    float:left;
    top:0;
    left:0;
    min-height:274px;
    min-width:274px;
    font-size: 0;
    background-color: transparent;
}

.cat_rollout:hover {
    background-image: url(images/rollover.png);
    min-width:254px;
    min-height:242px;
    padding-left: 20px;
    color: white;
    font-size: 21px;
    font-weight: normal;
    line-height: 24px;
    padding-top: 34px;
}

Ответы [ 5 ]

9 голосов
/ 22 октября 2010

Попробуйте подделать фоновое изображение или задайте для него значение blank.gif вместо , чтобы сделать его прозрачным. 

background:url(blank.gif);

См. http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/

5 голосов
/ 30 октября 2012

Проблема в том, что в течение некоторого времени (неделя? Две недели?) IE изменил способ интерпретации фона Кажется, нельзя сказать, что цвет прозрачный, а весь фон. Таким образом, вы должны изменить background-color: transparent на background: transparent. Очень противно.

1 голос
/ 09 апреля 2015

Наблюдается та же проблема, когда при наведении курсора на пустую область прозрачного элемента не действуют правила CSS, связанные с hover. Проблема исправлена ​​с использованием элемента в следующем стиле. 

background-color: rgba(0, 0, 0, 0.001);
0 голосов
/ 19 марта 2015

Вы можете использовать прозрачный GIF 1x1 в качестве datauri, если хотите. 

background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);

Вам решать, какой из них вы предпочитаете, это работает и является альтернативой выбранному ответу.

0 голосов
/ 22 октября 2010

Вы также можете попробовать изменить селектор наведения на:

 .thumb_container:hover .cat_rollout {...}

, поэтому родительский элемент div является элементом, реагирующим на наведение.

...