我正在尝试显示带有可点击区域的图像，它在图像底部为每个可点击区域显示不同的文本描述。这是我的代码:
编辑:我也不知道如何让这段代码正确显示，抱歉 :(
<DOCTYPE! html>
<head>
<style>
a .img {
border:none;
}
.caption {
display: none;
}
.caption:target {
display: block;
position: absolute;
top: 510;
text-align: centre;
}
body {
background-color: #1e1e1e;
color: #ffffff;
font-family: Trebuchet MS;
font-size: 16pt;
}
</style>
</head>
<body>
<img src="blahblah.png" usemap="#blahblah">
<map name="blahblah">
<area shape="rect" coords="XX,XX,XXX,XXX" href="#text1">
<div class=caption id=text1>
<u>display some text</u>
</div>
<area shape="rect" coords="XX,XX,XXX,XX" href="#text2">
<div class=caption id=text2>
<u>display some other text</u>
</div>
</body>
</html>
它在 Chrome 中完美运行，但我的文本不会出现在 IE8 中。谁能告诉我为什么，也许建议修复？尽量避免使用 javascript，因为我对它几乎一无所知。
最佳答案
这在 IE8 中不起作用的原因是因为您在 CSS 中使用了 :target 选择器。这是 IE8 不支持的 CSS3 选择器。请参阅文档:http://www.w3schools.com/cssref/sel_target.asp
一个简单的解决方法是使用外部 Javascript 库:selectivizr .
这使得使用任何 CSS3 属性成为可能。请记住，如果您使用它，您还需要包含 jQuery。
您的 HTML 看起来像这样:
<DOCTYPE! html>
<head>
<!-- CDN VERSION OF jQUERY, You can also download it -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<!-- The rest of your HTML -->
如果您只在 HTML 中包含这两个脚本，无需任何进一步修改，您的网站就可以正常工作。
关于html - Imagemap:点击显示文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38693998/