IE9的CSS輸入按鈕不起作用

Question

我不知道如何說話，但基本上當在IE9中，標準和瀏覽器模式設置爲IE9時，我的按鈕樣式無法正確呈現。在IE10兼容性方面，它們與IE9標準和瀏覽器模式看起來不錯，所以在IE10中測試時不會顯示這個錯誤。在鉻中它也可以完美地工作。這裏是我的按鈕輸入代碼和.css以及一個顯示按鈕渲染的小提琴。我附上了Chrome中呈現的按鈕的屏幕截圖（這是正確的），以便您可以看到它應該是什麼樣子，我只是不確定解決方法，並希望有人能夠提供幫助。

http://jsfiddle.net/LLHeD/

.button_standard, 
.CommandButton, 
.CommandButtonNoWidth, 
.CommandButtonWorkflow, 
.CommandButtonWorkflowNotify 
{ 
    border-top: #F4E6CC 2px solid; 
    border-right: #BFB087 2px solid; 
    border-bottom: #ABA476 2px solid; 
    border-left: #F5DFBA 2px solid; 
    padding: 0; 
    font-weight: bold; 
    font-size: 8pt; 
    margin: 0; 
    color: #666666; 
    background-color: #F3D29D; 
    text-decoartion: none; 
    cursor:pointer; 
} 

<input type="submit" name="ucDocSearchForm$btnSearch" value="Search" onclick="return validateDates();" id="ucDocSearchForm_btnSearch" class="CommandButtonNoWidth" name="btnSearch" onMouseOver="this.src='/applications/images/search_over_clink.gif'" onMouseOut="this.src='/applications/images/search_on_clink.gif'" style="font-weight:bold;width:65px" /> 

Answer 1

你的問題似乎是在border樣式聲明的順序。

CSS border（和border-left等）按照該順序被指定爲a concatenation of border-width, border-style, and border-color。

你已經得到了他們在一個完全不同的順序。

從理論上講，讓他們錯誤的順序會破壞事情。在實踐中，我沒有看到它實際上經常發生;在這種情況下，瀏覽器通常很好地解決你的意思，因爲這三個值很容易區分（其他一些樣式在這方面要求更高，但border通常不那麼重要）。

但是，關於理論和實踐的討論已經超出了這個範疇，因爲在代碼中將值切換成正確的順序會使其按照預期工作，所以很明顯這就是問題所在。

下面是更新小提琴：http://jsfiddle.net/LLHeD/2/

希望有所幫助。