Title disappears from div when gradient applied
I have several divs on my page. Each of them has the title attribute so the user can mouse over them to get more information. Until today, they were very plain backgrounds (I was working on layout/functionality before I moved onto style), and the title worked as expected. Now I have added a gradient background, and the title no longer appears.
The browser involved is 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;
botto开发者_如何学JAVAm: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;
}
How can I get the title to work again?
You need to add a background-color
to .myclass
. The title
will now pop up on hover. Live example: 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');
}
I think there may be two issues here:
You may need to set
-ms-filter
for IE8. See http://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspxEven though you set the
height
andwidth
inline, IE may still have issues withhaslayout
. Fix that by addingzoom:1;
to your.myclass
EDIT
As per comment
Using -ms-filter instead of filter causes the gradient not to render, but the title works.
Try using quotes, as per MS docs
When you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). Use commas (,) to separate multiple values, as shown in the Examples section.
So pick one set of quotes for enclosing the progid
and another for those inside the progid
. See if that works
Just a "wild" guess here as I haven't used this method before but try removing the quotes around the 1 for GradientType
精彩评论