爲什麼我的聯繫表單在Windows瀏覽器上渲染不正確？

我在我正在建立的網站的聯繫人頁面上創建了一個聯繫表單。 Mac瀏覽器正確渲染它，Windows上的IE7和IE8也是如此。爲什麼我的聯繫表單在Windows瀏覽器上渲染不正確？

FF，Chrome和Safari在Windows平臺上有間距問題。我的代碼列在下面;

<form action="" method="post"> 
    <fieldset id="fs1"> 
     <div id="formLeftCol"> 
      <ol> 
       <li> 
        <label for="name">Your Name*</label> 
       </li> 
       <li> 
        <input id="name" name="name" type="text" /> 
       </li> 
       <li> 
        <label for="email">E-mail*</label> 
       </li> 
       <li> 
        <input id="email" name="email" type="text" /> 
       </li> 
       <li> 
        <label for="website">Website</label> 
       </li> 
       <li> 
        <input id="website" name="website" type="text" /> 
       </li> 
       <li> 
        <input type="submit"name="submit" value="SUBMIT" /> 
       </li> 
      </ol> 
     </div> 
     <div id="formRightCol"> 
      <ol> 
       <li> 
        <label>Your Message*</label> 
       </li> 
       <li> 
        <textarea name="message" cols="40" rows="7"> 
         Please leave us a message... 
        </textarea> 
       </li> 
      </ol> 
     </div> 
    </fieldset> 
</form>

現在CSS：

#formLeftCol, #formRightCol { 
    float: left; 
} 
#formLeftCol { 
    width: 150px; 
} 
#formRightCol { 
    width: 473px; 
    margin-left: 15px; 
} 
input, textarea { 
    background: #f9f9f9; 
    border: 1px solid #c1c1c1; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #818181; 
    margin: 10px 0; 
    padding: 10px; 
} 
fieldset { 
    padding: 15px; 
} 
textarea { 
    width: 451px; 
} 
#fs1 { 
    border: 1px solid #c1c1c1; 
}

textarea的不會空間本身因此，太寬在這些瀏覽器，但每隔一個作品。

謝謝

來源

2010-09-10 Jonathan Musso

你的問題是在CSS的肯定。我不確定你在OSX上發生了什麼，但是我在Windows（IE，FF，Chrome）瀏覽器中看到了這個問題。

嘗試通過CSS指定爲您輸入的寬度：

input { 
    width:141px; 
}

這似乎給人的效果比我想象你想要的：http://jsfiddle.net/P5jkJ/1/

來源

2010-09-10 17:38:43 Ryley

一切正常浮動和尺寸似乎完美，唯一的問題是margin-left：15px;由於某種原因而被忽略。 – 2010-09-10 18:08:56

我可以確認這個工作正常，WebKit對'input'元素有一個更高的默認寬度，因爲它看起來很好，但是在Firefox 4 Beta上沒有任何修改。（Linux） – 2010-09-10 18:18:20

我將邊距換成其他容器，現在一切正常。感謝您的幫助伴侶。這很好。 – 2010-09-10 18:27:28

爲什麼我的聯繫表單在Windows瀏覽器上渲染不正確？

回答

相關問題