html - Firefox 中无法选择的滚动条

Question

当可滚动容器是具有 href 属性的 a 标签时，无法选择滚动条，而是拖动整个容器。这只发生在 Firefox 中。 Edge、Chrome 和 IE11 似乎还不错。

a {
  display: block;
  width: 150px;
  height: 200px;
  overflow-y: auto;
  /* Demo CSS */
  background: #ddd;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}

/* Demo CSS */
h3 {
  float: left;
  width: 150px;
  margin: 0px 20px 0px 0px;
}
h4 {
  float: left;
  width: 150px;
  margin: 15px 20px 15px 0px;
}
* {
  font-family: Arial, sans-serif;
}

<!-- Demo HTML: -->
<p>
  When a scrollable container is an <code>&lt;a&gt;</code> tag with a <code>href</code> attribute then the scrollbar cannot be selected. Instead the whole container drags. This only occurs in <strong>Firefox</strong>. Edge, Chrome & IE11 seem okay.
</p>
<p>
  <strong>Note: </strong>Using the mouse wheel to scroll still works.
</p>
<h4>href="#"</h4>
<h4><small>href="javascript:void(0);"</small></h4>
<h4>No href</h4>
<br clear="all" />
<!-- Buggy HTML: -->
<a href="#">
  <div>
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
    <div>Row 4</div>
    <div>Row 5</div>
    <div>Row 6</div>
    <div>Row 7</div>
    <div>Row 8</div>
    <div>Row 9</div>
    <div>Row 10</div>
    <div>Row 11</div>
    <div>Row 12</div>
    <div>Row 13</div>
    <div>Row 14</div>
    <div>Row 15</div>
    <div>Row 16</div>
    <div>Row 17</div>
    <div>Row 18</div>
    <div>Row 19</div>
    <div>Row 20</div>
    <div>Row 21</div>
    <div>Row 22</div>
    <div>Row 23</div>
    <div>Row 24</div>
    <div>Row 25</div>
    <div>Row 26</div>
    <div>Row 27</div>
    <div>Row 28</div>
    <div>Row 29</div>
    <div>Row 30</div>
    <div>Row 31</div>
    <div>Row 32</div>
    <div>Row 33</div>
    <div>Row 34</div>
    <div>Row 35</div>
    <div>Row 36</div>
    <div>Row 37</div>
    <div>Row 38</div>
    <div>Row 39</div>
    <div>Row 40</div>
    <div>Row 41</div>
    <div>Row 42</div>
    <div>Row 43</div>
    <div>Row 44</div>
    <div>Row 45</div>
    <div>Row 46</div>
    <div>Row 47</div>
    <div>Row 48</div>
    <div>Row 49</div>
    <div>Row 50</div>
  </div>
</a>
<a href="javascript:void(0);">
  <div>
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
    <div>Row 4</div>
    <div>Row 5</div>
    <div>Row 6</div>
    <div>Row 7</div>
    <div>Row 8</div>
    <div>Row 9</div>
    <div>Row 10</div>
    <div>Row 11</div>
    <div>Row 12</div>
    <div>Row 13</div>
    <div>Row 14</div>
    <div>Row 15</div>
    <div>Row 16</div>
    <div>Row 17</div>
    <div>Row 18</div>
    <div>Row 19</div>
    <div>Row 20</div>
    <div>Row 21</div>
    <div>Row 22</div>
    <div>Row 23</div>
    <div>Row 24</div>
    <div>Row 25</div>
    <div>Row 26</div>
    <div>Row 27</div>
    <div>Row 28</div>
    <div>Row 29</div>
    <div>Row 30</div>
    <div>Row 31</div>
    <div>Row 32</div>
    <div>Row 33</div>
    <div>Row 34</div>
    <div>Row 35</div>
    <div>Row 36</div>
    <div>Row 37</div>
    <div>Row 38</div>
    <div>Row 39</div>
    <div>Row 40</div>
    <div>Row 41</div>
    <div>Row 42</div>
    <div>Row 43</div>
    <div>Row 44</div>
    <div>Row 45</div>
    <div>Row 46</div>
    <div>Row 47</div>
    <div>Row 48</div>
    <div>Row 49</div>
    <div>Row 50</div>
  </div>
</a>
<a>
  <div>
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
    <div>Row 4</div>
    <div>Row 5</div>
    <div>Row 6</div>
    <div>Row 7</div>
    <div>Row 8</div>
    <div>Row 9</div>
    <div>Row 10</div>
    <div>Row 11</div>
    <div>Row 12</div>
    <div>Row 13</div>
    <div>Row 14</div>
    <div>Row 15</div>
    <div>Row 16</div>
    <div>Row 17</div>
    <div>Row 18</div>
    <div>Row 19</div>
    <div>Row 20</div>
    <div>Row 21</div>
    <div>Row 22</div>
    <div>Row 23</div>
    <div>Row 24</div>
    <div>Row 25</div>
    <div>Row 26</div>
    <div>Row 27</div>
    <div>Row 28</div>
    <div>Row 29</div>
    <div>Row 30</div>
    <div>Row 31</div>
    <div>Row 32</div>
    <div>Row 33</div>
    <div>Row 34</div>
    <div>Row 35</div>
    <div>Row 36</div>
    <div>Row 37</div>
    <div>Row 38</div>
    <div>Row 39</div>
    <div>Row 40</div>
    <div>Row 41</div>
    <div>Row 42</div>
    <div>Row 43</div>
    <div>Row 44</div>
    <div>Row 45</div>
    <div>Row 46</div>
    <div>Row 47</div>
    <div>Row 48</div>
    <div>Row 49</div>
    <div>Row 50</div>
  </div>
</a>
<!-- Demo HTML: -->
<br clear="all" />
<h3 style="color : red;">&#10008; Broken</h3>
<h3 style="color : red;">&#10008; Broken</h3>
<h3 style="color : green;">&#10004; Works</h3>

删除 href 解决了这个问题。这是 Firefox 的错误吗？

请在此处查看 3 个示例:Fiddle

P.S. 我知道 a 标签严格来说是 inline 元素，所以并不意味着有内部 block 元素，但我相信有些情况需要这样做，我很好奇为什么会出现此问题。

Answer 1

这似乎是 Firefox 中的一个错误

问题的症结在于您在可点击元素上显示滚动条，而 Firefox 的处理方式与 Chrome 和 IE 不同。

Bug 367028已经开放了将近 10 年，所以我认为这不会很快得到解决。

解决方法

通过稍微重新排列 HTML 以便将溢出应用到 div 而不是滚动条将在 Firefox 中按预期运行。

.container {
  width: 200px;
  height: 200px;
  overflow-y: auto;
  /* Demo CSS */
  background: #ddd;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
/* Demo CSS */

h3 {
  float: left;
  width: 200px;
  margin: 0px 20px 0px 0px;
}
h4 {
  float: left;
  width: 200px;
  margin: 15px 20px 15px 0px;
}
* {
  font-family: Arial, sans-serif;
}

<!-- Demo HTML: -->
<p>
  When a scrollable container is an <code>&lt;a&gt;</code> tag with a <code>href</code> attribute then the scrollbar cannot be selected. Instead the whole container drags. This only occurs in <strong>Firefox</strong>. Edge, Chrome & IE11 seem okay.
</p>
<p>
  <strong>Note: </strong>Using the mouse wheel to scroll still works.
</p>
<h4>href="#"</h4>
<h4>href="javascript:void(0);"</h4>
<h4>No href</h4>
<br clear="all" />
<!-- Buggy HTML: -->
<div class="container">
  <a href="#">
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
    <div>Row 4</div>
    <div>Row 5</div>
    <div>Row 6</div>
    <div>Row 7</div>
    <div>Row 8</div>
    <div>Row 9</div>
    <div>Row 10</div>
    <div>Row 11</div>
    <div>Row 12</div>
    <div>Row 13</div>
    <div>Row 14</div>
    <div>Row 15</div>
    <div>Row 16</div>
    <div>Row 17</div>
    <div>Row 18</div>
    <div>Row 19</div>
    <div>Row 20</div>
    <div>Row 21</div>
    <div>Row 22</div>
    <div>Row 23</div>
    <div>Row 24</div>
    <div>Row 25</div>
    <div>Row 26</div>
    <div>Row 27</div>
    <div>Row 28</div>
    <div>Row 29</div>
    <div>Row 30</div>
    <div>Row 31</div>
    <div>Row 32</div>
    <div>Row 33</div>
    <div>Row 34</div>
    <div>Row 35</div>
    <div>Row 36</div>
    <div>Row 37</div>
    <div>Row 38</div>
    <div>Row 39</div>
    <div>Row 40</div>
    <div>Row 41</div>
    <div>Row 42</div>
    <div>Row 43</div>
    <div>Row 44</div>
    <div>Row 45</div>
    <div>Row 46</div>
    <div>Row 47</div>
    <div>Row 48</div>
    <div>Row 49</div>
    <div>Row 50</div>
  </a>
</div>
<div class="container">
  <a href="javascript:void(0);">
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
    <div>Row 4</div>
    <div>Row 5</div>
    <div>Row 6</div>
    <div>Row 7</div>
    <div>Row 8</div>
    <div>Row 9</div>
    <div>Row 10</div>
    <div>Row 11</div>
    <div>Row 12</div>
    <div>Row 13</div>
    <div>Row 14</div>
    <div>Row 15</div>
    <div>Row 16</div>
    <div>Row 17</div>
    <div>Row 18</div>
    <div>Row 19</div>
    <div>Row 20</div>
    <div>Row 21</div>
    <div>Row 22</div>
    <div>Row 23</div>
    <div>Row 24</div>
    <div>Row 25</div>
    <div>Row 26</div>
    <div>Row 27</div>
    <div>Row 28</div>
    <div>Row 29</div>
    <div>Row 30</div>
    <div>Row 31</div>
    <div>Row 32</div>
    <div>Row 33</div>
    <div>Row 34</div>
    <div>Row 35</div>
    <div>Row 36</div>
    <div>Row 37</div>
    <div>Row 38</div>
    <div>Row 39</div>
    <div>Row 40</div>
    <div>Row 41</div>
    <div>Row 42</div>
    <div>Row 43</div>
    <div>Row 44</div>
    <div>Row 45</div>
    <div>Row 46</div>
    <div>Row 47</div>
    <div>Row 48</div>
    <div>Row 49</div>
    <div>Row 50</div>
  </a>
</div>
<div class="container">
  <a>
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
    <div>Row 4</div>
    <div>Row 5</div>
    <div>Row 6</div>
    <div>Row 7</div>
    <div>Row 8</div>
    <div>Row 9</div>
    <div>Row 10</div>
    <div>Row 11</div>
    <div>Row 12</div>
    <div>Row 13</div>
    <div>Row 14</div>
    <div>Row 15</div>
    <div>Row 16</div>
    <div>Row 17</div>
    <div>Row 18</div>
    <div>Row 19</div>
    <div>Row 20</div>
    <div>Row 21</div>
    <div>Row 22</div>
    <div>Row 23</div>
    <div>Row 24</div>
    <div>Row 25</div>
    <div>Row 26</div>
    <div>Row 27</div>
    <div>Row 28</div>
    <div>Row 29</div>
    <div>Row 30</div>
    <div>Row 31</div>
    <div>Row 32</div>
    <div>Row 33</div>
    <div>Row 34</div>
    <div>Row 35</div>
    <div>Row 36</div>
    <div>Row 37</div>
    <div>Row 38</div>
    <div>Row 39</div>
    <div>Row 40</div>
    <div>Row 41</div>
    <div>Row 42</div>
    <div>Row 43</div>
    <div>Row 44</div>
    <div>Row 45</div>
    <div>Row 46</div>
    <div>Row 47</div>
    <div>Row 48</div>
    <div>Row 49</div>
    <div>Row 50</div>
  </a>
</div>
<!-- Demo HTML: -->
<br clear="all" />
<h3 style="color : red;">&#10008; Broken</h3>
<h3 style="color : red;">&#10008; Broken</h3>
<h3 style="color : green;">&#10004; Works</h3>