IE11点击输入框宽度会发生改变

Question

这个问题只在IE11中出现，我无法弄清楚发生了什么。当我点击输入元素（即聚焦事件）时，元素的宽度会改变。我无法想出CSS来解决这个问题。有人有什么想法吗？

http://jsfiddle.net/JmRby/2/

表格

<table class="fields" id="EntityDetails_Fields" cellspacing="0" cellpadding="0">
<tbody>
    <tr>
        <td class="Form">Name:</td>
        <td>
            <input name="Name" id="Name" type="text" value="Memorial Park Group" />
        </td>
    </tr>
    <tr>
        <td class="Form">NPI:</td>
        <td>
            <input name="NPI" class="TextBox" id="NPI" type="text" value="" />
        </td>
    </tr>
    <tr>
        <td class="Form">Tax ID:</td>
        <td>
            <input name="TaxIDNumber" id="TaxIDNumber" type="text" value="21-21212121" />
        </td>
    </tr>
    <tr>
        <td class="Form">Medicare:</td>
        <td>
            <input name="MedicareNumber" id="MedicareNumber" type="text" />
        </td>
    </tr>
    <tr>
        <td class="Form">Medicaid:</td>
        <td>
            <input name="MedicaidNumber" id="MedicaidNumber" type="text" value="1234567" />
        </td>
    </tr>
    <tr>
        <td class="Form">In Use:</td>
        <td><span id="InUse"><input name="InUse$ctl00" id="InUse_ctl00" type="checkbox" checked="checked" /></span>
        </td>
    </tr>
</tbody>

CSS（层叠样式表）

table.fields {
    width: 98%;
    margin: 4px 1%;
}
table.fields .Form, table.fields .fl {
    padding: 2px;
}
table.fields > tbody > tr > td {
    padding: 2px 1%;
    vertical-align: middle;
}
.Form, .form, .fl {
    white-space: nowrap;
    width: 10%;
    vertical-align: middle;
}
table.fields > tbody > tr > td {
    padding: 2px 1%;
    vertical-align: middle;
}
table.fields input[type='text'], table.fields input[type='password'], table.fields select, .inpt {
    width: 98%;
    border: solid 1px #666;
    color: #000;
    box-sizing: border-box;
}

- coryrwest

Answer 1

好的，这是链接：http://jsfiddle.net/3TwKF/

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

这是“罪魁祸首（ms-clear）”的文档。要查看，请点击此处。

- Leng

---

天啊，我永远也想不到那个，你真是我的救星，谢谢你。 - coryrwest

Answer 2

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

更改文本框中的文本也会更改IE 11中以下链接的宽度。上述解决方案适用于点击文本的情况。这里是一个jsfiddle：

http://jsfiddle.net/3TwKF/20/

请告知任何解决方案

- Nilambari