Question

<input type="button" value="Button" />

默认情况下单击按钮时，IE会将文本向下缩小1px。有没有办法阻止只是 CSS？

我也将自己的样式添加到此按钮，一切都很棒，直到我单击按钮中的文本... IE似乎忽略了我的样式表中定义的：活动状态。但是，如果我单击按钮而不是文本，IE将执行：active状态。当然，无论我做什么，文字移动问题仍然存在。

有什么想法吗？

Answer 1

如果你使用一个带样式的A标签，你可以彻底解决整个“紧迫”状态问题。使用display:block和一些CSS，您可以将A-tag设置为与任何按钮完全一样。

Answer 2

好的，所以，我遇到了同样的问题，我发现了一个适用于所有浏览器的解决方案。

我有两个表单按钮，我更改了边框，字体系列和大小，以及填充。当我在IE中点击它们时它们会“跳”，因为IE在我看来是愚蠢的。所有其他浏览器似乎都正确地设置了按钮的样式，并且当用户点击它们时按钮移动时没有显示问题。

我找到的解决方案是：

设置表单按钮的样式，使它们每个都具有相等的边距，并应用包装分区，其位置或边距将根据您的喜好进行偏移。

   #myButton {
      font-family: Times New Roman;
      font-size: 16pt;
      border: 2px solid #f7f6f4;
      margin: 20px;
      padding:15px;
   }



   <div style="float:right;margin-right:75px;">
      <input type="submit" name="myButton" id="myButton" value="Don't Jump!" />
   </div>

Answer 3

我不知道您使用的是哪个版本的IE，但请尝试Button background shift 另外，请查看Remove 3D push effect on button，特别是来自allicarn的答案，该答案会更改元素的填充：active。只记得把css放在IE特定的情况下，比如IF块。

IE 8在单击时移动输入按钮的文本

3 个答案: