链接在 Div 内部不起作用，但在外部起作用答案

【问题标题】：Link is not working inside of Div but works outside链接在 Div 内部不起作用，但在外部起作用
【发布时间】：2020-05-07 01:37:47
【问题描述】：

感谢您抽出宝贵时间。我试图在 html 中的 DIV 内创建一些图像链接。链接存储在 SQL DB 中。这些链接在这个特定的 div 之外工作得很好，但我真的想把它们放在里面以进行样式设置。社交图像 div 是一个

        echo "<div class=column-3>";


            echo "<h3 id=\"artistNameLabel\"><strong>$artist_name</strong></h3>";
            echo "<img id=\"artistImage\"src=\"imageuploads/$imageFilePath\">";

            echo "<p><a href=\"$artistInstagram\" target=\"_blank\"><img alt=\"Artist Instagram\" src=\"images/instagramLogo.png\" width=\"25%\"></a></p>";//link doesnt work
            echo "<p><a href=\"$artistStreaming\" target=\"_blank\"><img alt=\"Artist Streaming Account\" src=\"images/spotifyLogo.png\" width=\"25%\"></a></p>";//link doesnt work                


        echo "</div>";

图像看起来很好，但链接不起作用。此外，作为链接的文本值也加载得很好。感谢您的帮助

【问题讨论】：

"$artistInstagram 和 $artistStreaming 里面是什么？这些是将被转移到链接的内容。另外，对于它的价值，你有一个reverse tabnapping vulnerability
@ObsidianAge 这些变量具有指向 Instagram 帐户和 spotify 帐户的链接。当在这个 div 之外放置一个 HREF 时，它们工作得很好。感谢您提供有关 tabnapping 的提示，我从未听说过

标签： php html css

【解决方案1】：

echo "<div class=column-3>";
echo "<h3 id='artistNameLabel'><strong>".$artist_name."</strong></h3>";
echo "<img id='artistImage' src='imageuploads/".$imageFilePath."'>";
echo "<p><a href='".$artistInstagram."' target='_blank'><img alt='Artist Instagram' src='images/instagramLogo.png' width='25%'></a></p>";//link doesnt work
echo "<p><a href='".$artistStreaming."' target='_blank'><img alt='Artist Streaming Account' src='images/spotifyLogo.png' width='25%'></a></p>";//link doesnt work                
echo "</div>";

【讨论】：

【解决方案2】：

你可以这样试试：

$artistInstagram = "https://www.instagram.com/";
$artistStreaming = "https://www.example.com/";
$artist_name = "Test";
$imageFilePath = "https://via.placeholder.com/150";

$html = <<< EOT
<div class=column-3>
    <h3 id="artistNameLabel"><strong>$artist_name</strong></h3>
    <img id="artistImage"src=$imageFilePath>
    <p>
        <a href=$artistInstagram target="_blank">
            <img alt="Artist Instagram" src="https://via.placeholder.com/150" width="5%">
        </a>
    </p>
    <p>
        <a href=$artistStreaming target="_blank">
            <img alt="Artist Streaming Account" src="https://via.placeholder.com/150" width="5%">
        </a>
    </p>
</div>
EOT;
echo $html;

我想这会解决你的问题

【讨论】：

【解决方案3】：

您需要使用“display:inline-block”设置锚标记的样式，它会正常工作。无论图像是否存在。

【讨论】：