html - 为什么我的联系表单在 Windows 浏览器中显示不正确？

Question

我在我正在构建的网站的联系我们页面上创建了一个联系表。 Mac 浏览器可以正确呈现它，Windows 上的 IE7 和 IE8 也可以。

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 不会相应地自行留出空间，它在这些浏览器上太宽了，但其他浏览器都可以。

谢谢

Answer 1

您的问题肯定出在 CSS 中。我不确定您对 OSX 有何看法，但我在 Windows 上的许多浏览器(IE、FF、Chrome)中看到了这个问题。

尝试通过 CSS 为您的输入指定宽度:

input {
    width:141px;
}

这似乎给出了我想象中您想要的效果:http://jsfiddle.net/P5jkJ/1/