html - 如何使表单元素的样式和功能在所有浏览器中都不会中断？

Question

如何使表单元素的样式和功能在所有浏览器中都相同？

<form> </form>
<fieldset> </fieldset>
<legend> </legend>      
<button> </button>
<label> </label>
<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select> </select>
<option> </option> 
<textarea> </textarea>
<optgroup> </optgroup>

这些都是 XHTML 和 HTML 支持的表单元素。

我的问题不是要制作垂直或水平形式。我问，我们是否应该为每个表单元素编写默认的 CSS，以便在所有浏览器中都相同。无论我将它们放置在何处以及如何放置。

这适用于 Eric Meyer 重置中的表单元素:

fieldset, form, label, legend
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

YUI CSS 重置还添加了以下内容:

input,textarea{ margin:0; padding:0; }

就像我发现了这个 JavaScript 修复:http://css-tricks.com/select-cuts-off-options-in-ie-fix/

有人知道其他提示吗？

Answer 1

没有必要让所有浏览器中的内容看起来都相同 - 主要目标是让内容在其他浏览器中不被破坏。在不同的浏览器中，有些东西无论如何都无法做到“相同”，某些表单元素就是其中之一。其中最糟糕的是文件上传按钮，它需要对其所代表的内容进行太多调整才能真正自定义它。

首先，仅选择您认为用户将使用的浏览器并重点关注这些浏览器。通常，它会类似于(Firefox、IE8/IE7/IE6、Chrome、Safari、Opera)。其余的你可能可以完全忽略。如果您有现有网站，请查看 Google Analytics 访问者的浏览器配置文件，然后就您想要支持的内容做出冷静的决定。在某些情况下，您甚至可以完全删除 IE6，这将使您的设计生活变得更加轻松。

然后，我个人所做的是，我将在 Firefox 中进行设计，尝试编写干净简单的代码，一旦准备就绪，就开始在不同的浏览器中查看设计(我已将其安装在不同的机器、笔记本电脑等上)并根据需要进行调整。 “一模一样”从来都不是我的目标，只是“实用”和“好看”。

希望有帮助。