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

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;
}