IE 中 HTML 按钮的默认 CSS 边框属性是什么？答案

【问题标题】：What is the default CSS border property for an HTML button in IE?IE 中 HTML 按钮的默认 CSS 边框属性是什么？
【发布时间】：2010-01-02 15:29:52
【问题描述】：

我有以下代码：

<button onmousemove="this.style.border='2px #555555 solid';" 
   onmouseout="this.style.border='';">Test</button>

在mousemove 上，它会按照指定正确更改边框。在mouseout 我的意图是将边框改回原来的。这适用于基于 Gecko 的浏览器，但不适用于 IE。 IE去掉所有的边框，按钮变成2D了。

如何恢复按钮的原始 3D 外观？

注意：为了调试，我尝试alert(this.style.border) 获取原始边框的值。它显示为空白。所以原来的边框值似乎是空白的。但是设置为空白不会使原始外观恢复原状。 :(

【问题讨论】：

【解决方案1】：

尝试为元素设置和清除一个类，并将边框值分配给该类。如下所示：

.buttonHover
{
  border: 2px #555555 solid
}

<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>

请注意，如果有的话，这个简单的 JS 代码会破坏你现有的分配给元素的类。如果您要使用其他类，请添加注释声明情况，我会相应地更改代码。

【讨论】：

【解决方案2】：

据我所知，一旦设置了元素的边框，就无法恢复原来的操作系统外观，尽管让我感到奇怪的是，即使清空 border 也不起作用。呃，好吧。操作系统风格不仅仅是一个经典的边框，还包括一个黑色轮廓（取决于操作系统的视觉设置，甚至更多）。

由于 IE outline，我认为最好的解决方法是在按钮周围放置一个元素，并在悬停时突出显示它。

【讨论】：

【解决方案3】：

建议使用 CSS 而不是 javascript。您可以执行以下操作。仅定义按钮的悬停属性。

HTML：

<button value="Hello">Hello</button>

CSS：

button:hover
{
    border:1px solid #333;
}

【讨论】：

:hover 伪标签将无法在 IE 上运行。这就是我使用JS的原因。好点虽然;）
Hyey BYK，谢谢不知道。无论如何，谷歌搜索很少，有些人使用 Javascript 链接在 Internet Explorer 中完成了 :hover 效果：annevankesteren.nl/2004/01/selectorhover-in-internet-explorer

【解决方案4】：

我认为您正在寻找的内容可以在 bowers 用户代理 CSS 中找到。这是一张表格，可以让您很好地了解不同浏览器的情况http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm。

【讨论】：