Question

我在表单上有一个按钮;

<button type="button" class="button" onclick="validate_form_newsletter_wide( form )"><img src="index_htm_files/btn_newsletter_wide.png" alt="Send"></button>

使用样式;

<style>

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

#form_newsletter_wide .button {
position:relative;
float: right;
cursor:pointer;
border: 0px;
padding: 0px;
margin: 0px;
margin-top: -1px;
z-index:100;
}

</style>

在Firefox中点击按钮没有任何关于按钮的变化，在Chrome中我得到了一个高亮的边框，我可以使用该按钮，但在IE浏览器中它更像是按下效果，按钮几乎似乎向下移动对。反正有没有阻止这个？

Answer 1

这是一种浏览器行为，一个简单的解决方案是使用链接标记而不是按钮（因为您正在调用javascript函数）。

<a href="#" onclick="myfunction()" role="button"><img src="myimg"/></a>

如果您仍想使用，我发现每个浏览器都有一些特性（通过简单的调试）：

Chrome 添加了大纲和填充
Firefox 使用标准按钮边框添加了大量内容
IE 与内部文字位置混淆

因此，要修复它们，您必须操纵按钮行为的伪选择器。对于IE，一个很好的解决方案是将文本包含在元素上，并使其相对定位。像这样：

<button type="button" class="button"><span>Buttom or Image</span></button>

<style>
    button,
    button:focus,
    button:active{
        border:1px solid black;
        background:none;
        outline:none;
        padding:0;
    }
    button span{
        position: relative;
    }
</style>

Pen

防止单击按钮创建按下的效果

1 个答案: