Question

我知道这是一个相当具体的问题和基本的HTML问题，但现在我的一些页面上已经发生了这种情况，我很好奇究竟发生了什么。

我在页面上有一系列垂直排列的div框，每个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表时。但是，内联样式就在那里，直到我可以解决链接的实际问题。 **另外：页面的链接显然仍在建设中。我现在一直处理多个页面上的禁用链接，而且更关心它们为什么要禁用它而不是页面的其余部分

Answer 1

我检查了您关联的网页来源，但您没有关闭＆lt; div＆gt;使用您网页上的class="locationsbx"。我认为你正在使用上面粘贴的代码而不是实际的页面。

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

页面上半部分的链接无效

任何想法/解释都会超级赞赏

1 个答案: