去除IE10自帶的清除按鈕

最近在工作中碰到了一個問題，原本在IE8，IE9下正常的input表單，在IE10下會出現清除按鈕，即表單右側會出現一個可以清除該表單內容的小叉。由於之前一直沒有相容過IE10，所以我專門搜了下原因。發現，該功能是微軟在IE10上新添加的功能，用於快速清空表單值。

而問題是，工作中使用到的表單控制項以及日期組件右側有清除圖標以及日曆圖標，這使得在IE10下，input表單右側會出現圖表疊加的情況——即控制項自帶的圖標和IE10自帶的清除按鈕重疊。很明顯，這影響了用戶體驗，所以當務之急是去除或隱藏該按鈕。

首先，我通過開發者工具想要直接選中該按鈕，然後隱藏該按鈕。然而，我發現：在開發者工具上無法發現該節點，這直接導致方案一失敗。

通過在Stack Overflow上的一番搜索，我找到了相關問題：點擊跳轉

最高票答案中，通過偽類選擇器—— ::-ms-clear選中了該按鈕，然後隱藏該按鈕。即：

input::-ms-clear {
    display: none;
}

通過測試，該方法確實可以去除該按鈕，但是贊同數第二的答案中寫道：

I found it's better to set the width and height to 0px. Otherwise, IE10 ignores the padding defined on the field -- padding-right -- which was intended to keep the text from typing over the 'X' icon that I overlayed on the input field. I'm guessing that IE10 is internally applying the padding-right of the input to the ::--ms-clear pseudo element, and hiding the pseudo element does not restore the padding-right value to the input.

翻譯過來就是：他認為最好將高寬設為0px來隱藏該按鈕，因為他發現該按鈕自帶padding-right屬性以防止文字覆蓋該屬性，而如果直接通過display進行隱藏，則將失去padding-right屬性造成文字覆蓋的bug。

所以，該問題的最佳解決方法為通過偽類選擇器選擇該元素，然後將其高寬設為0隱藏該元素：

input::-ms-clear {
  width : 0;
  height: 0;
}