Internet Explorer 的按钮上出现奇怪的白线答案

【问题标题】：Weird White Line appears on buttons in Internet ExplorerInternet Explorer 的按钮上出现奇怪的白线
【发布时间】：2012-10-03 07:41:47
【问题描述】：

我有一个严重的 HTML 问题：Internet Explorer 的按钮上出现一条奇怪的白线。

原始模型示例 -

按钮 HTML -

<input type="button" Class="buttonAll" value="Regenerate" onClick="Captcha();"/>

<input type="submit" value="Save" onclick="" class="buttonAll">

我的 UI HTML 不包含任何 Doctype，并且我有一个只进行外观更改的标准。

我尝试通过两种方式应用 CSS：

使用 BG 图像 -

上面的CSS：

background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;

使用 CSS 渐变 -

CSS：

input[type="button"], input[type="submit"], .buttonAll {

    overflow:visible; display:inline-block; cursor:pointer;  
    outline:0px none; width: auto; vertical-align:middle;
    margin:3px 6px 3px 0px; padding:2px 6px; border:1px solid #804240; 

    /*background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;*/

    background: #92110d;    background-repeat:repeat;
    background: -webkit-gradient(linear, left top, left bottom, from(#f04b47), to(#92110d));
    background: -moz-linear-gradient(center top, #f04b47, #92110d);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f04b47', endColorstr='#92110d');

    text-align:center; text-transform:capitalize; color:#fdfad9; font-size:11px!important; }

以上代码在 FF 和 Chrome 中都运行良好。

是否有可能由于事件焦点/活动/模糊而发生这种情况
我想知道如何删除这条白线？

【问题讨论】：

白线是什么意思？焦点边界？我没有看到一条白线。
您能否添加一个示例来说明它的外观（给我们看一个 chrome 示例 - 或者也给我们 html）
“我的 UI HTML 不包含任何 Doctype”...在 IE 中没有 doctype = quirks 模式，这意味着许多事情看起来不像预期的那样。
是的，我同意...它在 IE 中的 Quirks 模式！但是想找个技术原因，为什么很奇怪...

标签： html internet-explorer css

【解决方案1】：

您需要从输入字段中删除边框，例如 input[type="button"], input[type="submit"], .buttonAll { border:none;}

【讨论】：

为我工作，确保您有正确的按钮 CSS 选择器，也可以使用 !important。例如button, .btn { border: none !important; }

【解决方案2】：

Vipul 上面的代码是对的。原因是您的文档类型声明。因为有两种类型的文档模式 1. 严格模式，2. 怪癖模式。 Quirk 模式不支持 W3C 现代标准。

【讨论】：

我同意你的观点，但是有没有任何 Javascript 可以删除焦点/将焦点放在其他地方而不是按钮上......或者任何可以提供更多控制的标签......