HTML 链接在 Firefox 中不起作用，但在 Chrome 和 Safari 中可以正常工作答案

【问题标题】：HTML links not working in Firefox but work fine in Chrome and SafariHTML 链接在 Firefox 中不起作用，但在 Chrome 和 Safari 中可以正常工作
【发布时间】：2013-12-27 18:05:13
【问题描述】：

启用链接的 DIV 的某些子项在 Firefox 中无法正常工作，但在 Chrome 中可以正常工作。

在www.tekiki.com 上查看实时示例。尝试单击列出的第一个应用程序的文本区域。它行不通。但是，即使文本和图标属于同一个父链接，您也可以单击该图标。

我们尝试了 StackOverflow 的其他建议，包括设置 overflow:hidden 和清除浮点数，但似乎都不起作用。

我们正在 Firefox 24 上进行测试。

帮助？

HTML：

<a class="app_box click_drop" href="/itunes-store/apps/free-apps/app/runtastic-road-bike-pro-gps-cycling-computer-tracker?itunes-store-id=468429333" itunes_id="468429333" path="/36/6013/468429333">
            <div class="icon_box">
                <div class="icon" style="background-image: url(&quot;http://a3.mzstatic.com/us/r30/Purple/v4/4b/91/03/4b910379-2983-22be-358c-0c894ca82216/mzl.izwihsdx.256x256-75.jpg&quot;);"></div>
            </div>      
            <div class="caption_box">
                <div class="details_box">
                    <div class="name">Runtastic Road Bike PRO GPS Cycling Computer &amp; Tracker</div>                  
                    <div class="desc_box">
                        <div class="desc text">“Free today with ‘App of the Day’. 

Download ‘App of the Day’, and every day discover one paid app absolutely free!”

4.5+ Rating, TechCrunch, Mashable, NYTimes and others are raving about Runtastic... Find out why &amp; download...</div>
                    </div>                  
                    <div class="ratings_box">
                        <div class="avg_rating" style="background-position: 0px -91px;"></div> <span class="num_ratings">2040</span>                            
                    </div>                  
                    <div class="price_box" style="display: block;">                     
                        <span class="cur_price">Free</span> <span class="old_price">$4.99</span> <span style="display:none" class="sponsored">Sponsored</span>
                    </div>                  
                </div>
            </div>
        </a>

CSS：

.page_list .app_box:first-child {
    margin-top: 0;
}
.page_list .list a {
    color: #5C5C5C;
}
.page_list .app_box {
    -moz-box-sizing: border-box;
    background: url("/images/dandy/caption_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #CCCCCC;
    display: block;
    margin: 25px 0 0;
    overflow: hidden;
}
a {
    color: #5E87B0;
    text-decoration: none;
}

【问题讨论】：

标签： css html firefox

【解决方案1】：

有一个z-index 问题阻止它被链接。

在#bg_graphics 上使用z-index: -1 以使其工作。

例如，

#bg_graphics {
    background: url("/images/web/bg_graphics.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 465px;
    left: 50%;
    margin-left: -900px;
    position: fixed;
    width: 1800px;
    z-index: -1;
}

【讨论】：

您不知道为什么“moz-box-pack:justify”在此页面上不起作用 (tekiki.com/itunes-store/apps/free-apps/all) 是吗？（数字应该是右对齐的。）
你为什么要使用仅限于firefox的？ - @Crashalot
我们也为其他浏览器提供了它，但由于某种原因，mozilla 版本无法正常工作。我们应该使用其他东西吗？ "display:box" 和 "box-pack:justify" 在 Firefox 中失败。
我检查过，它在 .page_list .category_box - @Crashalot 上运行良好
moz-box-pack - @Crashalot

【解决方案2】：

尝试使用更高的z-index，它可以工作。

#page_box {
    -moz-box-sizing: border-box;
    margin: 50px auto;
    position: relative;
    z-index: 9999;
}

【讨论】：

感谢您的快速响应！我希望我能给你们两个问题，但公平地说，内森·李在回答方面几乎没有击败你们。不过谢谢！

【解决方案3】：

试试这个

将z-index: -1; 添加到#bg_graphics

或

将z-index: 9999; 添加到#page_box

【讨论】：