html - 页面上半部分的链接无效

Question

我知道这是一个相当具体的问题和基本的 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 表时。但是，在我可以解决链接的实际问题之前，内联样式就在那里。 ** 另外:页面的链接显然仍在 build 中。我现在一直在处理多个页面上的禁用链接，并且比页面的其余部分更关心它们为什么被禁用

Answer 1

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

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