IE中HTML按鈕的默認CSS邊框屬性是什麼？

Question

我有下面的代碼：

<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)得到原始邊框的值。它顯示爲空白。所以原始的邊界值似乎是空白的。但設置爲空白不會使原來的外觀恢復原樣。 :(

Answer 1

嘗試設置和清除元素的類併爲該類指定邊界值。如下：

.buttonHover 
{ 
    border: 2px #555555 solid 
} 

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

請注意，如果有的話，這個簡單的JS代碼將會破壞分配給元素的現有類。如果您要使用額外的課程，請添加一條註釋以說明情況，然後我會相應地更改代碼。

Answer 2

據我所知，一旦設置了元素的邊框，就沒有辦法恢復原始的操作系統外觀，儘管這讓我覺得很奇怪，即使是排空border也沒有完成這項工作。 OS風格不單單是一個經典的邊框，但包括黑色輪廓（取決於OS視覺設置，甚至不止於此）。

看到，因爲IE < 8不明白outline，我認爲最好的解決辦法是把一個圍繞按鈕的元素，並突出顯示懸停時的情況。

Answer 3

會推薦使用CSS而不是javascript。您可以執行以下操作。 僅定義按鈕的懸停操作。

HTML：

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

CSS：

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

Answer 4

我認爲你在找什麼可以在涼亭用戶代理CSS被發現。這裏有一個表格，可以讓你很好地瞭解不同瀏覽器發生了什麼變化。http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm。