在 Chrome 中聚焦时，部分隐藏的按钮会跳起来答案

【问题标题】：Partially hidden button jumps up when focused in Chrome在 Chrome 中聚焦时，部分隐藏的按钮会跳起来
【发布时间】：2016-11-13 14:08:45
【问题描述】：

我有一个带有绝对定位的提交按钮的表单，移动到右下角并部分隐藏（它看起来像设计上的四分之一圆）。当我将焦点放在其中一个输入字段上，然后按 TAB 将焦点移到按钮上时，它会向上跳并将整个表单内容向上移动。

样式非常基本：

<form action="">
   <input type="text" width="100px" placeholder="Text input">
  <button>Submit</button>
</form>

CSS

form {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: #cef;
}

button {
  position: absolute;
  display: block;
  height: 100px;
  width: 100px;
  right: -50px;
  bottom: -50px;
  background: yellow;
}

这是小提琴： https://jsfiddle.net/4zhL68z0/1/ Chrome 版本为 54.0.2840.87（64 位）

剪辑不起作用，将位置从底部：-20px 更改为顶部：500px 不起作用，因此欢迎提出任何想法。

【问题讨论】：

我不确定期望的结果是什么。表单的转换是每个浏览器上的预期行为。浏览器将滚动到焦点内容。

标签： html css google-chrome

【解决方案1】：

尝试将按钮放在容器中并定位该绝对值。这是一个快速的小提琴：https://jsfiddle.net/giwan/4zhL68z0/2/

```

.button-container {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  bottom: -50px;
}

button {
  display: inline-block;
  border-radius: 360px;
  border: none;
  width: 100px;
  height: 100px;
  background: yellow;
}

```

或者，您可以使用图像在按钮上获得所需的效果。

【讨论】：

嘿 Giwan，它有点工作，但如果容器有填充或按钮与容器有一些偏移，它仍然会跳起来。我会等一下，如果没有更好的结果，我会接受它作为答案。
这个例子在 Firefox 中运行良好，但不幸的是在 Chrome 中不行。
@DarekKay 我不确定这是否是 Chrome 中的错误，但如果您将 padding-top:0px 添加到按钮容器中，它似乎又可以工作了。

【解决方案2】：

试试这个。这对我有用。

    button {
       position: absolute;
       display: block;
       height: 100px;
       width: 100px;
       right: 0px;
       bottom: 0px;
       background: yellow;
       -moz-border-radius: 100px 0 0 0;
       -webkit-border-radius: 100px 0 0 0;
      }

【讨论】：