Question

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

以下是我使用的代码：

.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）会在点击时将按钮的内容向下移动一个像素。

你有很多可能的方法：

使用内置<button>的{{1}}代替<span>。将按钮<input type="button">和范围relative放在absolute / top left，以便按钮内容的移动不会影响范围。丑陋，并且会在其他浏览器中破解，因此您只希望这种样式适用于IE-and-maybe-Opera。
使用设为按钮的链接而不是实际按钮，并将脚本应用于其0事件。与按钮不同，您可以完全控制链接的一致样式。我会建议不要这样做，因为你拖动了大量对按钮无意义的链接行为，如中键单击，右键单击书签，拖放等等。很多人都使用链接做按钮任务，但IMO非常不受欢迎。（特别是当他们使用click链接时......可怕。）
使用非活动元素（例如javascript:而不是实际按钮），并将脚本应用于其<span>事件。再次，您可以获得完整的样式控制。这就是SO用于“添加评论”等操作的内容。麻烦的是你打破键盘导航;您无法使用制表符，空格等来导航和激活控件。您可以通过为元素提供click属性来在大多数浏览器中启用键盘导航，但将tabindex放在非活动元素上是无效的HTML。您也可以从脚本中编写它，并添加脚本以允许空格或返回以激活faux按钮。但是你永远不会完全完美地重现浏览器表单字段行为。
用tabindex替换整个事物。当然，您可以对图像进行像素完美控制！但是试图匹配渲染样式，并为每个按钮生成一个新图像，通常会让人痛苦不堪。

选项2和3也存在引入JavaScript依赖关系的问题，因此当JS不可用时，您的表单将会中断。您可以通过在标记中使用普通<input type="image">并将其替换为脚本中的其他控件来缓解这种情况，或者如果您从脚本创建它们，则无任何问题。但最后，我通常的结论是，这是太多的努力和过于脆弱的结果，最好的事情是选择0：

和它一起生活。当你点击按钮内容时，按钮内容移动的程度通常不是那么糟糕。

Answer 2

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

首先，您需要某种方法来定位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>

接下来，在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']

祝你好运！

Answer 3

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

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

编辑：在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>

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

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

3 个答案: