Question

我试图显示带有可点击区域的图像，该图像在每个可点击区域的图像底部显示不同的文字说明。这是我的代码：

编辑：我无法弄清楚如何正确显示此代码，抱歉:(

<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，因为我对它几乎一无所知。

Answer 1

这在IE8中不起作用的原因是因为您在CSS中使用:target选择器。这是IE3中不支持的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中包含这两个脚本而不做任何进一步修改，那么您的网站就可以正常运行。

图像映射：单击以显示文本

1 个答案: