html - 删除 HTML 按钮/提交的完整样式

Question

我正在为所有浏览器设置 css 中的提交按钮样式，它在除 ie7 以外的所有浏览器中都可以正常工作 当我点击提交按钮时，它会移动到顶部一点。它使它看起来变形。 我为 ie 使用了特定的 css。

这是我使用的代码:

.button
{
    width   : 80px;
    background  : none;
    cursor  : pointer;
    font-family : 'voltaeftu-regular',Times New Roman;
    font-size   : 16px;
    color   : #fff;
    border  : none;
    margin      : 0px;
    padding     : 0px;
}

Answer 1

是的，恐怕 IE(和 Opera)在单击时会将按钮的内容向下和向右移动一个像素，这是样式按钮不可避免的问题。

这里有很多可能的方法:

1. 使用 <button>用<span>在里面而不是 <input type="button"> .定位按钮 relative和跨度 absolute在 top/left 0 , 这样按钮内容的移动就不会影响跨度。丑陋，并且会在其他浏览器中中断，因此您只希望此样式适用于 IE 和可能适用于 Opera。

2. 使用样式为按钮而不是实际按钮的链接，并将脚本应用于其 click事件。与按钮不同，您可以完全控制链接的一致样式。我建议不要这样做，因为您正在拖入大量对按钮没有意义的链接行为，例如中键单击、右键单击书签、拖放等。很多人确实使用链接执行按钮任务，但 IMO 这是非常不受欢迎的。 (特别是当他们使用 javascript: 链接时……可怕。)

3. 使用非事件元素，例如 <span>而不是实际的按钮，将脚本应用于其 click事件。同样，您可以获得完全的样式控制。这就是 SO 用于“添加评论”等操作的内容。问题是你破坏了键盘导航；您不能使用制表符、空格等来导航和激活控件。您可以通过为元素提供 tabindex 来在大多数浏览器中启用键盘导航。属性，但将 tabindex在非事件元素上是无效的 HTML。您也可以从脚本中编写它，也可以添加脚本以留出空间或返回以激活人造按钮。但是您永远完全完美地重现浏览器表单字段的行为。

4. 用 <input type="image"> 替换整个东西.自然地，您可以对图像进行像素级的完美控制!但是，尝试匹配呈现样式并为每个按钮生成新图像通常会让人头疼不已。

选项 2 和 3 也存在引入 JavaScript 依赖项的问题，因此当 JS 不可用时您的表单将中断。您可以通过使用正常的 <button> 来缓解这种情况在标记中并将其替换为脚本中的其他控件，或者如果您是从脚本中创建它们也没问题。但最后，我通常的结论是，这一切都付出了太多的努力，结果也太脆弱了，最好的办法是选择选项 0:

• 接受它。当您单击按钮时，按钮内容会稍微移动一点，这通常不是什么坏事。