Question

我花了一些时间在jsfiddle中复制这个。但我做到了：

https://jsfiddle.net/zhankezk/uvmxq6we/2/

复制步骤：

点击搜索文本框，按Tab键

问题：

搜索文本框和搜索按钮向上移动

预期：

他们应该留在原地。

这里的html是来自实际网站的部分。但我注意到这个问题只有在全球导航主题 - 个人＆＃34; div以及我认为这是Chrome错误的原因是因为首先它在Firefox和IE中运行良好。其次，在按Tab键并移动位置后，如果你调整任何垂直样式，问题就会消失，例如，你可以取消选中＆＃34; position：relative＆＃34;对于div＆＃34; global-nav__search is-expanded＆＃34;并再次打勾。问题就会消失。

<div class="global-nav theme--personal">
  <div class="c-search fn_search-suggestions">
    <div class="global-nav__search is-expanded">
      <input type="search" class="search__field" placeholder="Search" name="query" data-target-url="/personal/personalsearchresults" autocomplete="off">
      <a href="#" class="icon-search fn_search-button" tabindex="-1"><span class="vh">Search</span></a>
    </div>
    <div class="c-suggestions" tabindex="-1">
      <a href="#">Search for ‘home’</a>
    </div>
  </div>
</div>

我完全错了，先谢谢任何人的帮助！

Answer 1

这个对我来说很奇怪，而且我不完全确定它不代表Chrome中的错误（和/或perhaps an accessibility feature?），但Chrome似乎

将大的“开始”内容溢出为预期的隐藏（即使它绝对定位，其父级是相对的）
没有隐藏溢出的绝对定位子（正如预期的那样？）因为溢出：隐藏的容器本身不是绝对/相对定位，但似乎
当标签到绝对定位元素的链接时，Chrome似乎突然想要考虑之前的内容，包括更大的“开始”链接，所以它似乎是“向下滚动”溢出的内容：隐藏'ed元素为你（即使你正在改变焦点，因为绝对定位已经可见）。

（至少我认为这就是发生的事情。特别是因为在来回切换时我在Inspector中看不到任何CSS属性发生变化。）

那该怎么办？似乎有两种解决方法是

更改该“开始”按钮的line-height属性以匹配字体大小（1.625rem），我想这是为了溢出考虑它的高度，和/或
在.global-nav .c-search上设置一个明确的（并且足够大）高度，我想这样Chrome就不会因overflow:hidden元素中不同内容的高度而感到“惊讶”。

从输入中按Tab键仅在Chrome中将输入向上移动

1 个答案: