最近在工作中碰到了一個問題，原本在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; }

?

總結

以上是生活随笔為你收集整理的去除IE10自带的清除按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。