Question

所以，问题是：使用Firefox如果你尝试单击并拖动链接内的滚动条，它将尝试移动链接区域。正常点击和鼠标滚动工作，但点击和拖动不会。

这说明了问题（只在Firefox中） http://jsfiddle.net/jz6jW/

关于如何解决这个问题的任何想法？

修改：对于我自己的情况，这解决了这个问题。 http://jsfiddle.net/jz6jW/7/ （添加文本和img的链接，而不只是将所有内容放在链接中）

Answer 1

这是一个奇怪的错误。我猜想Firefox正在考虑将span的滚动条作为范围的一部分。由于带有滚动条的跨度位于<a>内部，滚动条上的单击被解释为点击<a>，您应该会在单击滚动条时立即注意到通常的锚着色变化拇指。

但是，如果你将<a>放在<span>内，它在Firefox中运行正常：

<span class="container">
    <a href="#">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
    </a>
</span>

和

.container {
    width: 300px;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
}

http://jsfiddle.net/ambiguous/6rg4m/

更新：基于http://jsfiddle.net/ambiguous/wPyms/，您的CSS有点奇怪：

.Text {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
    position: absolute;
}

这个浮动到左边并且绝对定位（没有指定位置），这对我来说没有多大意义。此外，看起来您正在尝试将图像定位为文本的背景，那么为什么不只是调整容器大小以匹配图像并使图像成为容器的背景？这可以让你简化标记和CSS，不会混淆Firefox（我怀疑它会混淆任何浏览器）。

我认为以下内容将为您提供您所追求的外观和行为。你的jsfiddle中的图像不会去任何地方所以我把它变成了一只小猫。

HTML：

<div class="Cont">
    <a href="#">
        <!-- ... -->
    </a>
</div>

CSS：

.Cont {
    float: left;
    position: relative;
    background-color: #888;
    width: 400px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    background: url(http://farm3.static.flickr.com/2654/3822981633_abc0213105.jpg);
}

.Cont a {
    color: #fff;
    text-decoration: none;
    display: block;
}

直播：http://jsfiddle.net/ambiguous/EgUwH/2/

这与我原来的建议几乎相同。

Answer 2

＆LT; a＆gt; tag是一个内联元素你不能把标签放进去抱歉

在这里尝试此链接 http://jsfiddle.net/jz6jW/1/

Answer 3

自2006年以来这是一个very old Firefox bug。令人惊讶的是，直到今天它还没有修复。我很幸运能够遇到它。

经过一些实验，我发现修复程序也很简单，删除了href元素上的<a>属性。

这在Firefox中运行良好：

<a>
    <span class="container">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
    </span>
</a>

滚动条内部仅与FireFox的链接问题

3 个答案: