私は 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 はどうですか?)