爲什麼我的textarea盒在不同瀏覽器中的位置有所不同

Question

這是html結構。

 <form id="coment"....> 
    <div id="name"><input....>....</div> 
    <div id="email"><input....>....</div> 
    <div id="website"><input....>....</div> 
    <div id="textbox"><textarea...>....</div> 
<div id="submit"><input...>....</div> 
</form> 

我想textarea框是在名稱，電子郵件，網站的文本的權利。像這張照片所示。 http://run.xxmn.com/1.png

當我這種風格添加到 「文本框」，

width:400px; 
    position: relative; 
    top: -70px; 
    left: 3px; 

在Chrome和IE 8

，textarea的的DIV ID unorder，它是在上面的姓名，電子郵件，網站的一部分。

在Firefox中，IE6,7.it顯示ok。

我該如何在Chrome和IE 8中正確使用它？

Answer 1

解決這個問題的正確方法是創建一個代表窗體的列的新div，並將三個輸入放置在左欄中，將文本框放在右欄中。

例如：

<div class="left"> 
    <div id="name"><input....>....</div> 
    <div id="email"><input....>....</div> 
    <div id="website"><input....>....</div> 
</div> 
<div class="right"> 
    <div id="textbox"><textarea...>....</div> 
</div> 

然後：

.left { 
    float: left; 
    width: 50%; 
} 

.right { 
    float: right; 
    width: 50%; 
} 

#name, #email, #website, #textbox { 
    width: 100%; 
} 

#testbox { 
    height: 300px; /* However tall it needs to be */ 
}