首页 文章

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

提问于
浏览 次
2

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

<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/

有谁知道其他任何提示？

html css xhtml cross-browser

5 回答

  • 1

    在所有浏览器中使事物看起来都不相同 - 主要目标是让其他浏览器不要破坏 . 在不同的浏览器中有某些东西，无论如何都不能使它们“相同”，并且某些形式元素就是其中之一 . 其中最糟糕的是文件上传按钮，它需要过多的推文才能真正定制它 .

    首先，选择您认为用户将拥有的浏览器，并专注于这些浏览器 . 通常，它会像（Firefox，IE8 / IE7 / IE6，Chrome，Safari，Opera） . 其余的你可以完全忽略 . 如果您有现有网站，请查看您的Google Analytics访客浏览器配置文件，然后对您要支持的内容做出冷决定 . 在某些情况下，您甚至可以完全切断IE6，这将使您的设计生活变得更加容易 .

    然后，我个人做的是我将在Firefox中设计，尝试编写干净简单的代码，一旦准备就绪，开始在不同的浏览器（我已经安装在不同的机器，笔记本电脑等）上查看设计并调整一些东西有必要的 . “相同”绝不是我的目标，只是“功能性”和“好看” .

    希望有所帮助 .

    回复于
  • 1

    跨浏览器兼容性通常不会对表单元素造成问题 . 它在边缘/填充处理（或曾经是）以及其他特殊元素（例如Netscape的旧“图层”标记）中令人抓狂，但不是真正的表单 . 你遇到了一个特定的问题吗？

    回复于
  • 0

    不同的操作系统风格 <button /> 和 <input type="submit" /> 不同（即在Mac OSX上，提交按钮是圆角，水色的药丸形状 . 在Windows机器上，按钮是盒形的，上面有一个像素的插入/开始边框.CSS可能会强制出现Windows风格的按钮，但可能无法完美地模拟OSX按钮，直到完全支持CSS3 border-image属性 . 如果Mac客户端获取 <button /> 元素的CSS样式信息，它将恢复为样式化一个DIV，所以你可以让它看起来像一个Windows风格的按钮，但这是你的目标吗？

    除此之外，其他输入字段可能会有CSS重置' margin, border, and font treatment, but you'需要支持某些高级选择器，因为 <input type="submit" /> 提交按钮将与其他基于文本的 <input /> 字段（看起来与按钮完全不同）一致，所以你需要两个CSS语句，可能是这样的：

    input { border:solid 1px black; padding:0.25em; }
input[type="submit"] { border: outset 1px black; background-color:"#CCC"; padding:0.5em 1em; }

    不支持属性选择器（IE6！）的浏览器将无法正确应用CSS .

    回复于
  • 1

    Eric Meyers是一个很好的起点 . 我发现向某些元素添加类（复选框等）对我有很大帮助（上面提到的IE6问题） . 你能做的最好的事情（或者至少我做过的事情）就是花时间做一些阅读，找出你满意并理解的跨浏览器解决方案，并一遍又一遍地使用它 .

    回复于
  • 0

    表单元素在所有浏览器中都不相同 . 浏览器几乎可以渲染表单元素，但是主流浏览器当前渲染它们的方式完全不同 .

    这有点牵扯，但Eric Meyer的文章Formal Weirdness强调了复杂性 .

    回复于

相关问题