Заголовок исчезает из div при применении градиента

Question

У меня есть несколько дел на моей странице. Каждый из них имеет атрибут title, поэтому пользователь может навести на них курсор мыши, чтобы получить больше информации. До сегодняшнего дня это были очень простые фоны (я работал над макетом / функциональностью, прежде чем перейти к стилю), и заголовок работал, как и ожидалось. Теперь я добавил градиентный фон, и заголовок больше не появляется.

Используется браузер IE8.

HTML:

<div title='' class="mywrapclass"> <!-- no title because an outer wrapper has a title I want to suppress here -->
    <div title="More information..." style="width:40px;height:50px" class="myclass"></div>
</div>

CSS:

.myclass
{
    border: 1px solid white;
    border-bottom:none;
    bottom:0%;
    position:absolute;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#87aaff', endColorstr='#000044');
}

.mywrapclass
{
    background-color:White;
    position:absolute;
    left:58%;
    width:32%;
    height:100%;
    overflow: hidden;
}

Как я могу заставить название работать снова?

Answer 1

Вам необходимо добавить background-color к .myclass. title теперь появится при наведении курсора. Живой пример: http://jsfiddle.net/tw16/TbdAm/

.myclass{     
    background-color: white; /* add this */
    border: 1px solid white;
    border-bottom:none;
    top:0%;
    position:absolute;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#87aaff', endColorstr='#000044');
}

Answer 2

Я думаю, здесь могут быть две проблемы:

1. Возможно, вам придется установить -ms-filter для IE8. Смотри http://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx

2. Несмотря на то, что вы установили height и width, у IE все еще могут быть проблемы с haslayout. Исправьте это, добавив zoom:1; к вашему .myclass

EDIT

Согласно комментарию

Использование -ms-фильтра вместо фильтра приводит к тому, что градиент не отображается, но название работает.

Попробуйте использовать кавычки, согласно MS docs

Когда вы используете -ms-фильтр, заключите его в одинарные кавычки (') или двойные кавычки ("). Используйте запятые (,) для разделения нескольких значений, как показано в разделе примеров.

Итак, выберите один набор кавычек для включения progid и другой для тех, кто находится внутри progid. Посмотрите, работает ли это

Answer 3

Просто "дикое" предположение здесь, так как я не использовал этот метод раньше, но попробуйте удалить кавычки вокруг 1 для GradientType