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

Remove the complete styling of an HTML button/submit

提问by Mayur

I'm styling a submit button in css for all browser its work fine in all browser except ie7 When i click on submit button it moves to the top a little. It makes it look out of shape. I used a specific css for ie.

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

Here is the code that I used:

这是我使用的代码：

.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;
}

回答by bobince

Yes, I'm afraid it's an unavoidable problem with styling buttons that IE (and Opera) will move the content of the button down and to the right by one pixel when clicked.

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

You've got a bunch of possible approaches here:

你在这里有很多可能的方法：

1. Use a <button>with a <span>inside it instead of an <input type="button">. Position the button relativeand the span absoluteat top/left0, so that the movement of the button content doesn't affect the span. Ugly, and will break in other browsers, so you'd only want this styling to apply for IE-and-maybe-Opera.

2. Use a link styled as a button instead of an actual button, with script applied to its clickevent. Unlike buttons, you get full control over consistent styling for links. I would advise against this as you're dragging in a load of link behaviours that don't make sense for a button, like middle-click, right-click-bookmark, drag-and-drop etc. Lots of people do use links to do button tasks but IMO it's highly undesirable. (Especially when they use javascript:links... ghastly.)

3. Use an inactive element such as a <span>instead of an actual button, with script applied to its clickevent. Again, you get full styling control. This is what SO uses for actions like ‘add comment'. The trouble is that you break keyboard navigation; you can't use tab, space etc. to navigate and activate the controls. You can enable keyboard navigation in most browsers by giving the element a tabindexattribute, but putting tabindexon an inactive element is invalid HTML. You can alternatively write it from script, and also add script to allow space or return to activate the faux-button. But you'll never quitereproduce browser form field behaviour perfectly.

4. Replace the whole thing with an <input type="image">. Naturally you get pixel-perfect control over the image! But trying to match rendering styles, and generating a new image for each button, is usually too much of a pain in the neck.

1. 使用<button>带有<span>内部的a而不是<input type="button">。将按钮relative和跨度absolute放置在top/ 处left0，以便按钮内容的移动不会影响跨度。丑陋，而且会在其他浏览器中崩溃，因此您只希望此样式应用于 IE-and-maybe-Opera。

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

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

4. 用一个<input type="image">. 当然，您可以对图像进行像素完美的控制！但是尝试匹配渲染样式，并为每个按钮生成一个新图像，通常是一件令人头疼的事。

Options 2 and 3 also have the problem that they introduce a JavaScript dependency, so your form will break when JS is unavailable. You can mitigate that by using a normal <button>in the markup and replacing it with other controls from script, or if you're creating them from script anyway no problem. But in the end, my usual conclusion is that this is all far too much effort and too fragile a result, and that the best thing is to plump for option 0:

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

• Live with it. It's usually not that bad a thing that button content moves a little bit when you click it.

• 和它一起生活。当您单击按钮内容时，它会移动一点点，这通常并不是一件坏事。

回答by Sebastian S

This bugged me for a long time as well, but I've found a decent solution.

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

First, you'll need some way of targeting a specific browser in your CSS. You could use Modernizr, or my personal favorite, this sweet little snippet from http://rog.ie/post/9089341529/html5boilerplatejs

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

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

Next, in your HTML document, within your button, add a <span>tag that holds the button's contents. Style it to look fine in the friendly browsers, then add this bit of code to the button's :activestyles in your CSS:

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

html[data-useragent*='Opera']

You can replace Operawith any browser name, then style the spanto your liking.

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

It may look something like this:

它可能看起来像这样：

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

It's a bit hacky, and probably overkill for such a minor problem, but it works. Best of all, you have precise control over everything. You can even target just Windows machines, or iPads (with data-platform='iPad'), or a specific version of a browser, like this:

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

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

Good luck!

祝你好运！

回答by Marks

I don't know if that is the problem, but you could try to set the active state also:

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

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

EDIT: Used the following mini-sample in IE7 and cant see the button moving:

编辑：在 IE7 中使用了以下迷你示例并且看不到按钮移动：

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

Just set a border to see button surroundings. Code is working for me.

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