Firefox中无法选择的滚动条

Question

当可滚动容器是具有a属性的href标记时，无法选择滚动条而是整个容器拖动。这只发生在 Firefox 中。 Edge，Chrome＆amp; 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

PS 我知道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>