当我单击“保存”按钮时，我的整个表单向下移动了几个像素，我想避免这种情况

Question

我想创建一个精美的按钮，当有人点击它时，它看起来就像被点击了一样。不幸的是，我注意到在我的 Mac（Chrome 和 Firefox 最新浏览器）上，当我单击“保存”按钮时，包含表单的整个 div（由下面的“配置文件”ID 标识）向下移动了几个像素，而我正在单击“保存”按钮。我创建了这个 JSFiddle 来演示——https://jsfiddle.net/05qxeaok/2/。我有

<div id="profile" class="row">
  <div class="col-md-6 col-md-offset-3">
    <form class="edit_user" id="edit_user_2" action="/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="zNwIQCm3caY33TTc1cs3j2yCVI8VVCWhNHR7RsUuY/d0hqYjeMTCtS85diQv6nKGcX8PbzXTZYHQqCVthMWh1A==" />

    <h2>Tell Us More ...</h2>

      <div class="profileField"> 
      Height
      <input size="2" class="form-control" type="text" value="2" name="user[height_feet]" id="user_height_feet" /> ft. 

      <input size="2" class="form-control" type="text" value="1" name="user[height_inches]" id="user_height_inches" /> in. 
      </div>

      <div class="profileField">
      <label for="user_weight">Weight</label>
      <input size="3" class="form-control" type="text" name="user[weight]" id="user_weight" /> lbs.
      </div>

      <div class="profileField">
    <input type="submit" name="commit" value="Save" method="put" class="button" />
      </div>
</form>
</div>
</div>

按钮的类是

.button {
  margin: 0 0 5px;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  font-weight: bold;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #dfdfdf;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #a8a8a8;
  border-radius: 3px 3px 2px 2px;
  outline: 0;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  background-image: -moz-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  background-image: -o-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  background-image: linear-gradient(to bottom, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
}

.button:hover, .button:active {
  background: #dfdfdf;
  border-top-color: #c9c9c9;
}

.button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active {
  vertical-align: -5px;
  margin-bottom: 0;
  padding: 1px 13px 0;
  border-width: 0;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}

如果我从按钮中删除了“class=“button””属性，那么当我单击按钮时，id=“profile”的 div 不会向下移动，但是我会丢失按钮上的所有样式。如何进行调整，以便当我点击它时只有我的按钮向下移动，而不是整个表单？

编辑： 容器（id="profile" 的元素）具有以下 CSS。我正在尝试将所有内容都放在屏幕中间

#profile {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align:center;
}

Answer 1

这是因为margin-bottom 在:active 状态下被删除。您可以将相同的金额添加到margin-top 以弥补差距。

.button:active {
  margin-top: 5px;
}

Answer 2

您应该尝试更改表单的大小。我认为您的表单高度固定，按钮位于底部，并且您的按钮最初的底部边距为 5px，单击时会减小到 0。

所以你的按钮在被点击时会占用额外的空间。

我认为你不需要这个，但是如果你的大脑中某些 css 边距属性可能已经溜走，请检查它。 This link