我在所有浏览器中为所有浏览器设置一个提交按钮,它在所有浏览器中工作正常除了ie7当我点击提交按钮时它会移动到顶部一点点.它使它看起来变形.我使用了一个特定的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;
}
bob*_*nce 18
是的,我担心样式按钮是一个不可避免的问题,IE(和Opera)会在点击时将按钮的内容向下移动一个像素.
你在这里有一堆可能的方法:
使用<button>了<span>内部的它,而不是一个<input type="button">.将按钮relative和范围定位absolute在top/ left 0,以便按钮内容的移动不会影响范围.丑陋,并将在其他浏览器中破解,因此您只希望这种样式适用于IE-and-maybe-Opera.
使用设置为按钮的链接而不是实际按钮,并将脚本应用于其click事件.与按钮不同,您可以完全控制链接的一致样式.我会建议不要这样做,因为你拖动了大量对按钮无意义的链接行为,如中键单击,右键单击书签,拖放等等.很多人都使用链接做按钮任务,但IMO非常不受欢迎.(特别是当他们使用javascript:链接时......可怕.)
使用非活动元素(例如,<span>而不是实际按钮),并将脚本应用于其click事件.再次,您可以获得完整的样式控制.这就是SO用于"添加评论"等操作的内容.麻烦的是你打破键盘导航; 您无法使用制表符,空格等来导航和激活控件.您可以通过为元素提供tabindex属性来在大多数浏览器中启用键盘导航,但是将tabindex非活动元素置为无效HTML.您也可以从脚本中编写它,并添加脚本以允许空格或返回以激活faux按钮.但是你永远不会完全重现浏览器表单字段的行为.
用一个替换整个东西<input type="image">.当然,您可以对图像进行像素完美控制!但是,尝试匹配渲染样式,并为每个按钮生成新图像,通常会让人感到痛苦.
选项2和3也存在引入JavaScript依赖关系的问题,因此当JS不可用时,您的表单将会中断.您可以通过<button>在标记中使用法线并将其替换为脚本中的其他控件来缓解这种情况,或者如果您从脚本创建它们也没问题.但最后,我通常的结论是,这是太多的努力和过于脆弱的结果,最好的事情是选择0:
我不知道这是否是问题所在，但您也可以尝试设置活动状态：
.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>
只需设置一个边框即可查看按钮周围的情况。代码对我有用。