【问题标题】:Why are title attributes in images not displaying as tooltips为什么图像中的标题属性不显示为工具提示
【发布时间】:2013-03-20 12:37:21
【问题描述】:

我无法在图像标签中弹出标题属性。有问题的页面位于http://design.wildsandwebdesign.co.uk/technical/using-delphi-with-mysql-1.php。有 4 张图片,标题和 alt 属性中都有文字。在 Firefox 19.0.2 或在 WinXP 中运行的 Chrome 或 Opera 中没有出现任何标题,但它们在 IE8 中出现(哎呀!)。 W3C 验证器说页面是干净的。

我的网站有许多其他页面,其中图片中的标题属性确实有效,但只有几个有同样的问题。我尝试提高图像的 z-index,但没有运气。当页面上有 3] 图像时似乎会发生这种情况,但是在其他页面上有 3 或 4 个图像时它确实可以工作。我就是想不通。

【问题讨论】:

标签: html image tags title


【解决方案1】:

因为您的图像与您的 p 元素重叠

p 标记中删除widthposition 属性,并改用marginpadding

【讨论】:

    【解决方案2】:

    这是因为图像没有被悬停,因为p 元素覆盖了它们。

    如果您将鼠标悬停在第一张图片最左边的几个像素上,您可以获得工具提示。

    【讨论】:

    • 呃是的,这有点明显。但这些是内联图像,为什么会这样呢?例如,它在下一页上正常工作。我注意到(1)如果您将鼠标悬停在旁边的文本中的段落分隔符处,您会得到工具提示,(2)如果我在

      之后将图像向左浮动,并且文本中的段落分隔符向右下半图像,工具提示可以,光标与第一段一致,但不是第二段!!! (3) 如果我在悬停看到的图像周围放置一个链接,然后单击转到该链接,但工具提示不会出现。然而重要的是 - 我该如何解决它。

    • 也许我没有在里面放足够的信息,但对我来说很清楚发生了什么(或没有发生),但问题是为什么?想要做这件事并不是一件奇怪的事情。是吗?
    【解决方案3】:

    是的,我知道你没有回答自己的问题,但最后我自己找到了答案,我有点失望,有些答案没有抓住重点。是的,很明显文字是“在图像前面”。坦率地说,我认为这是显而易见的,并认为这是理所当然的。我的错。然而,事情就是这样。浏览器知道当它看到这个结构时,它必须将以下文本放在图像的右侧或左侧,并且它会这样做。然而,它忽略了它位于图像旁边并阻止工具提示显示的事实。浏览器也知道光标在哪里,否则它一开始就无法做到这一点。

    也许这源于 W3C 已经定义了浏览器如何处理内联图像而不考虑它。但最终,一旦我弄清楚“为什么”会发生这种情况,就很容易找到答案。尽管我必须自己做。

    吉姆

    【讨论】:

    • 这种情况发生在任何内联图像投影到其包含块之外的情况下,如果图像位于 p 块中,则悬停在该 p 块结束后消失。它与下一个“覆盖”图像的 p 块无关——因为它没有!尝试在第二个 p 块中的文本上实现悬停。它将是它应该在的地方,在文本而不是图像之上。吉姆
    猜你喜欢
    • 2014-02-14
    • 1970-01-01
    • 2011-11-20
    • 1970-01-01
    • 1970-01-01
    • 2017-09-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多