ie 10 div 对 hover的支持

最新推荐文章于 2020-08-28 19:27:32 发布

xueshandugu

最新推荐文章于 2020-08-28 19:27:32 发布

阅读量969

点赞数

本文链接：https://blog.csdn.net/xueshandugu/article/details/24976477

版权

来源：http://www.experts-exchange.com/Software/Internet_Email/Web_Browsers/Q_27288784.html

IE9 hover image not working for DIV

Asked by: WernerVonBraun Solved by: WernerVonBraun

We have the following

1) an HTML file
2) a CSS file
3) two image files, one blueish, one orangeish. See attached code.

Works in every browser except IE9

What on EARTH is going ON?

CSS:

div.menubutton
{
   background-image          : url('WebMenuWithBorderBG.png');
   height                    : 30px;
   width                     : 150px;
}

div.menubutton:hover
{
   background-image          : url('WebMenuWithBorderHoverBG.png');
   height                    : 30px;
   width                     : 150px;
}

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

Select all Open in new window

HTML:

<html>
<head>
  <link href="WTF.css" rel="stylesheet" type="text/css">
</head>
<body>

  <div id="M_Tasks" class="menubutton"></div>

</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

Select all Open in new window

Jump to Answer

ID: 27288784

DIV CSS hover background image eek

Internet Explorer

Topic

Web Browsers

Comments

Author Comment

by: WernerVonBraun on 2011-09-02 at 06:41:58ID: 36473332

Blue Image

Blue Image

Author Comment

by: WernerVonBraun on 2011-09-02 at 06:42:29ID: 36473334

Orange Image

Orange Image

Author Comment

by: WernerVonBraun on 2011-09-02 at 06:43:10ID: 36473338

3 KB
And the four all together in one handy ZIP

IE9Prob01.zip

Accepted Solution

by: WernerVonBraun on 2011-09-02 at 08:12:04ID: 36473916

Never mind, peeps. I found that adding a <!DOCTYPE tag to the top of the page solved the problem. It doesn't even matter which one you add; you could add this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
or this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

It both works.

[shrug]

Author Closing Comment

by: WernerVonBraun on 2011-09-02 at 08:13:57ID: 36473930

There you have it folks. Zee internets exploder iz ebil