firefox

Question

我在使用Google Chrome时设置了此代码块，正如您在此图片中看到的那样，它可以很好地对齐。

但是，使用Firefox查看时无法正确显示

我做错了什么？

.full-panel select {
  -webkit-appearance:none;
  background-color:#1B6B80;
  background-position:95% 50%;
  background-repeat:no-repeat;
  border:1px solid #1B6B80;
  border-radius:2px;
  color:#FFFFFF;
  display:block;
  font-size:10px;
  height:30px;
  line-height:10px;
  padding-left:5px;
  padding-right:25px;
  position:absolute;
  right:150px;
  top:30px;
  width:150px;
}

<form method="POST" action="/" accept-charset="UTF-8"><input name="_token" type="hidden" value="M7sQaw7MVFV4DQhoyMxdiuJPB7E5KbaWVB5U9lbp">
    <div class="full-panel">
        <input name="quick" value="1" type="hidden">
        <input class="biginput" type="text" name="name" placeholder="Set up your free website">
        <select name="domain_id">
          <option>mysite.com</option>
        </select>
        <input class="bigbutton" type="submit" value="Submit">
    </div>
</form>

Answer 1

当您必须使用绝对位置时，请确保其父容器具有相对位置

.full-panel {
  position:relative;
}

这样你可以开始计算相对于它的容器的像素（顶部：30px）而不是相对于身体