页面上半部分的链接不起作用答案

【问题标题】：link on top half of page won't work页面上半部分的链接不起作用
【发布时间】：2015-03-07 05:11:12
【问题描述】：

我知道这是一个相当具体的问题和基本的 html 问题，但它现在已经在我的一些页面上发生了，我很好奇到底发生了什么。

我在一个页面上垂直排列了一系列 div 框，每个框都包含一张图片，该图片是指向网站上不同页面的链接。问题是当我添加超过 3 个这样的 div 框时，突然底部三个上方的所有链接都停止工作。

http://webstage.emich.edu/dining-new/locations/easterneateries.php

我在 jsfiddle 中尝试过相同的代码，如下所示：

.locationsbx {
    position:absolute;
    width: 540px;
    height:70px;
    z-index:5;
    margin-left: auto;
    margin-right:auto;
    background-color: #363636;
    margin-top:110px;
}
.primetriangle {
    border-top:25px solid green;
    height: 0;
    position:absolute;
    width: 0;
    z-index:3;
    border-right: 25px solid transparent;
    height: 0;
    position:absolute;
    width: 0;
    z-index:5;
    border-top-color: #CCC;
}

<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 20px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/estreetgrill.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/estreet.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 130px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/sunsetstrips.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top:240px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/freshens.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 350px;">
    <div class="primetriangle" style="z-index: 4;"></div>	<a href="/dining-new/locations/eateries/uppercrust.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>

    <div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
    <div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
        <img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
        <img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
    </div>
</div>

并且它在那里工作正常 - 所以我很困惑为什么将代码放在实际服务器上会导致禁用链接问题的一些原因。

任何想法/解释都会非常感谢

**注意：我很清楚拥有内联样式并不是很好的形式，尤其是当我有外部 CSS 表时。但是，在我可以解决链接的实际问题之前，内联样式就在那里。 ** 还：页面的链接显然仍在建设中。我现在一直在处理多个页面上的禁用链接，并且比页面的其余部分更关心为什么它们会被禁用

【问题讨论】：

所以我查看了您的代码，认为某些内容可能尚未关闭。搞砸之后，我意识到如果您在右侧的侧栏（style2info）上display:none，您的按钮将起作用。我会在那里检查一下，看起来你可能会用<div> 覆盖它们。那将是您检查的第一个地方。
我打赌没有人能真正回答你的问题，建议：1）如果可以的话，删除css中的任何绝对位置。 2）不要使用内联样式。 3）valid你的html代码。
您不应该为“餐饮类别”栏使用表格，如果这是您正在谈论的部分，那么只有第一张图片包含在锚标记中。

标签： html css hyperlink

【解决方案1】：

我去检查了您链接到的页面的来源，但您没有在页面上关闭 div> 和 class="locationsbx"。我认为您是在上面粘贴的代码中做的，而不是在实际页面上。

编辑： 并不是一个完整的答案。我本来只想发表评论，但我需要 50 分，我没有。

【讨论】：

如果没有她的所有代码，这几乎是无法回答的。此外，内联样式的使用确实使使用起来很糟糕。你有基本的想法。她有一个绝对定位的 div 覆盖了一个未闭合的 div。