Internet Explorer 中的锯齿状按钮边缘答案

【问题标题】：Jagged Button edges in Internet ExplorerInternet Explorer 中的锯齿状按钮边缘
【发布时间】：2010-09-14 02:42:16
【问题描述】：

如何去除 Internet Explorer 中宽按钮的锯齿状边缘？例如：

【问题讨论】：

我想在没有主题的情况下绘制它们（即设置背景和边框颜色）不是你想要的。不过它确实有效。
是的，删除 xp 主题是一种可能的解决方案，但这是一个客户应用程序，应用程序的其余部分使用 xp 主题按钮。

标签： javascript css internet-explorer

【解决方案1】：

您还可以通过在按钮上设置background-color 和/或border-color 来消除Windows XP 的按钮样式（以及所有其他Windows 版本）。

尝试以下样式：

background-color: black;
color: white;
border-color: red green blue yellow;

当然，您可以使这更加赏心悦目。但你明白我的意思:)

Stack Overflow 使用这种方法。

【讨论】：

【解决方案2】：

作为一种解决方法，您可以删除按钮两端的空格，这样可以减少锯齿状边缘。这是通过以下 css 和一些 jQuery 完成的：

input.button {
   padding: 0 .25em;
   width: 0; /* for IE only */
   overflow: visible;
}

input.button[class] { /* IE ignores [class] */
    width: auto;
}

$(function(){
    $('input[type=button]').addClass('button');
});

jQuery 用于添加按钮类。可以找到更深入的文章here。

【讨论】：

如果我是你，我会在多个操作系统、多个浏览器中测试解决方案。那是;如果您担心您的设计在非 Windows XP 环境中的外观。
另外：这似乎有点矫枉过正。
jQuery 选择器应该是input[type=submit]？

【解决方案3】：

在按钮上设置 overflow: visible; 将解决 IE 6 和 7 中的问题。

（见http://jehiah.cz/archive/button-width-in-ie）

例外情况

在 IE 6 中，如果 display:block; 也应用于按钮，则上述修复将不起作用。

在 IE 6 中将按钮设置为 display:inline; 将使修复工作。
如果您在表格单元格中有这样的按钮，则表格单元格不会收缩到新的、更小宽度的按钮。

您可以在 IE 6 中通过在按钮上设置 width: 0; 来解决此问题。但是，在 IE 7 中，这将使除按钮文本之外的所有内容都消失。

（见http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie）

【讨论】：

【解决方案4】：

您可以使用 CSS 更改按钮的边框样式，如下所示：

/**************************************************************************
 Nav Button format settings
**************************************************************************/
.navButtons
{
    font-size: 9px;
    font-family: Verdana, sans-serif;
    width: 80;
    height: 20; 
    position: relative; 
    border-style: solid; 
    border-width: 1;
}

【讨论】：

【解决方案5】：

您对此无能为力，但好消息是它已在 IE8 中修复

http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html

【讨论】：

例外情况

有关样式按钮的更多信息：