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的情况下完全相同（编写这个例子的速度更快，那就是全部）。