html - Firefox 中的 CSS 顶部定位

Question

我在使用谷歌浏览器时设置了这个代码块的样式，正如你在这张图片中看到的那样，它对齐得很好。

但是用 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)