IE：輸入欄的佔位符影響選框的寬度

Question

<form> 
<input type="text" placeholder="some text"> 
<select> 
    <option>op1</option> 
    <option>op2</option> 
    <option>op3</option> 
</select> 
</form> 

第一次點擊選擇框。這是工作，選擇區域寬度適合選擇控制。 但是，如果我點擊文本字段，然後單擊選擇框，選擇區域看起來更大。 如果我刪除輸入字段的佔位符屬性，它將正常工作。 我認爲這是Internet Explorer佔位符的問題。 https://jsfiddle.net/22v1og48/ 這個問題的任何想法？如何仍然保留佔位符，但選擇框仍然正常工作？

Answer 1

我能解決這個問題的唯一方法是去除焦點佔位符，並將其設置回模糊：

$('#a1') 
 
    .data('placeholder', $('#a1').attr('placeholder')) 
 
    .focus(function() { 
 
    $(this).attr('placeholder', ''); 
 
    }) 
 
    .blur(function() { 
 
    $(this).attr('placeholder', $(this).data('placeholder')); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input id="a1" type="text" placeholder="some text"><select> 
 
    <option>op1</option> 
 
    <option>op2</option> 
 
    <option>op3</option> 
 
    </select> 
 
</form>

注意，在IE中placeholder消失當你關注時，但這不是它在其他瀏覽器（firefox/chrome）中的工作原理，當你開始輸入時佔位符會消失。此代碼將改變此行爲，但會使select保持其原始大小。

另外請注意，我用jQuery的例子，但你可以做到完全一樣沒有jQuery（它只是更快寫這個例子，這就是所有）。