CSS 中的相对定位在 Safari 和 Firefox 中完全不同？答案

【问题标题】：Relative positioning in CSS is completely different in Safari and Firefox?CSS 中的相对定位在 Safari 和 Firefox 中完全不同？
【发布时间】：2012-10-22 17:02:47
【问题描述】：

我是 CSS 新手，我一直在尝试创建一个单选按钮与文本字段相邻的 Web 表单。但是，在 Firefox 中，单选框看起来不错，但是当我在 Safari 中检查时，单选框位于文本字段的中间。

CSS 看起来像这样：

   input#answers
{
     display: block;
    height: 31px;
    left: 87px;
    position: relative;
    top: 0px;
    width: 350px;
}

input[type="radio"]
{
    display: inline- block;
    height: 20px;
    left: 249px;
    position: relative;
    top: -30px;
    vertical-align: middle;
}

和这样的 HTML：

    <form id="quizCreator" name="quizCreator" method="post" action="quiz.maker.php">
    <label><span><img src="images/quizcreatorText.ques.png" hspace="79px" vspace="70px" class="titles"  /></span>      <br />
      <input type="text" name="question" id="question" />
    </label>
    <label><img src="images/quizcreatorText.ans.png" hspace="79px" vspace="70px" class="titles" id="ans" />      <br />
      <input type="hidden" name="creator" value="myform" />
      <br />
      <input type="text" name="answer1" id="answers" />
    </label>
    <label>
      <input type="radio" name="radio" id="radio1" value="radio1" />
    </label>

    <label>
      <input type="text" name="answer2" id="answers" />
    </label>
    <label>
      <input type="radio" name="radio" id="radio3" value="radio2" />
    </label>

    <label>
      <input type="text" name="answer3" id="answers" />
  </label>  
    <label>
     <input name="radio" type="radio" class="radio" id="radio3" value="radio3" />
  </label>  

    <label>
      <input type="text" name="answer4" id="answers" />
    </label>
    <label>
      <input name="radio" type="radio" id="radio4" value="radio4" />
    </label>
    <span><input  type="image" src="images/quiznameText.next.png"  name="nextPage" id="nextPage"  class="nxtbutton" /></span>
</form>

我尝试过使用相对定位和边距，但是虽然它解决了 Safari 中的问题，但 Firefox 看起来却是错误的。有没有办法让它们都像我想要的那样使用一组代码工作？（那么 MSIE 呢？）

【问题讨论】：

标签： css forms radio-button css-position

【解决方案1】：

您不应该为此使用相对定位。

正确的结构是这样的（不确定你是想要之前还是之后的文本）：

<div class="answers">
<ul>
    <li><label>your text</label><input type="radio" /></li>
    ...repeat...
</ul>
</div>

CSS：

.answers ul, .answers li {
    list-style-type:none;
    margin:0;
    padding:0;
}

.answers li {
    clear:both
}

.answers label {
    display:block;
    float:left;
    width:100px;
}

.answers input {
     display:block;
     float:left;
}

【讨论】：