删除 HTML 按钮/提交的完整样式答案

【问题标题】：Remove the complete styling of an HTML button/submit删除 HTML 按钮/提交的完整样式
【发布时间】：2011-03-07 20:04:44
【问题描述】：

我在 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

我不知道这是否是问题，但您也可以尝试设置活动状态：

.button, .button:active{
...
}

编辑：在 IE7 中使用了以下 mini-sample 并且看不到按钮移动：

<html>
<head>
<style type="text/css">
.button
{
width   : 80px;
background  : none;
cursor  : pointer;
font-family : 'voltaeftu-regular',Times New Roman;
font-size   : 16px;
color   : #fff;
border  : 1px solid #0f0;
margin      : 0px;
padding     : 0px;
}
</style>
</head>
<body style="background:#f00;">
    <input class="button" type="submit"/>
</body>
</html>

只需设置边框即可查看按钮周围环境。代码对我有用。

【讨论】：

HI 标记我也试过了，但是没有用有什么办法可以解决这个问题
您可以尝试其中一种重置 css 并查看问题是否仍然存在。但是在快速查看重置 css 时，我没有看到任何可能导致此问题的按钮设置。

【解决方案2】：

是的，我担心 IE（和 Opera）在单击时会将按钮的内容向下和向右移动一个像素，这是样式按钮无法避免的问题。

这里有很多可能的方法：

使用带有<span> 的<button>，而不是<input type="button">。将按钮relative和跨度absolute定位在top/left0，这样按钮内容的移动就不会影响跨度。丑陋，并且会在其他浏览器中中断，因此您只希望这种样式适用于 IE-and-maybe-Opera。
使用样式为按钮而不是实际按钮的链接，并将脚本应用于其click 事件。与按钮不同，您可以完全控制链接的一致样式。我建议不要这样做，因为您正在拖入大量对按钮没有意义的链接行为，例如中键单击、右键单击书签、拖放等。很多人确实使用链接做按钮任务，但 IMO 这是非常不可取的。（特别是当他们使用javascript: 链接时......太可怕了。）
使用诸如<span> 之类的非活动元素代替实际按钮，并将脚本应用于其click 事件。同样，您可以获得完整的样式控制。这就是 SO 用于“添加评论”等操作的内容。问题是你破坏了键盘导航；您不能使用制表符、空格等来导航和激活控件。在大多数浏览器中，您可以通过给元素一个tabindex 属性来启用键盘导航，但是将tabindex 放在非活动元素上是无效的HTML。您也可以从脚本编写它，也可以添加脚本以留出空间或返回以激活人造按钮。但是您永远不会完全完美地重现浏览器表单字段的行为。
将整个内容替换为<input type="image">。自然地，您可以对图像进行像素完美的控制！但是尝试匹配渲染样式，并为每个按钮生成一个新图像，通常是一件让人头疼的事情。

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

忍受它。当您单击按钮内容时，按钮内容会移动一点，这通常不是那么糟糕。

【讨论】：

【解决方案3】：

这也困扰了我很长时间，但我找到了一个不错的解决方案。

首先，您需要通过某种方式在 CSS 中定位特定浏览器。你可以使用 Modernizr，或者我个人最喜欢的，来自http://rog.ie/post/9089341529/html5boilerplatejs 的这个可爱的小 sn-p

<script>
var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
</script>

接下来，在您的 HTML 文档中，在您的按钮内，添加一个包含按钮内容的 <span> 标记。将其设置为在友好的浏览器中看起来不错，然后将这段代码添加到 CSS 中按钮的 :active 样式中：

html[data-useragent*='Opera']

您可以将Opera 替换为任何浏览器名称，然后根据自己的喜好设置span 的样式。

它可能看起来像这样：

html[data-useragent*='Opera'] button:active span { 
    position: relative; 
    left: -1px; 
    top: -1px; 
}

这有点 hacky，对于这样一个小问题可能有点矫枉过正，但它确实有效。最重要的是，您可以精确控制一切。您甚至可以只针对 Windows 机器或 iPad（使用 data-platform='iPad'）或特定版本的浏览器，如下所示：

html[data-useragent*='Chrome/13.0']

祝你好运！

【讨论】：