Html 当<；输入>；有占位符文本

我在mobile safari iOS6上有一个bug，只有在方向改变时布局向左移动-从纵向到横向再向后

仅当占位符属性中存在内容时，该错误才会存在；如果删除占位符属性的内容，则方向更改时不会出现错误。我已经建立了一个演示，在那里你可以切换输入的占位符的内容，并添加和删除错误

我已经看到了解决布局问题的解决方案，但希望了解占位符导致问题的原因，并解决问题-而不是包含布局。

引导我找到适合我的解决方案。它可以归结为一个通用的乱七八糟的问题：

if ( /iPhone/.test(navigator.userAgent) &&
     !/Opera Mini/.test(navigator.userAgent) )
{
  window.addEventListener("orientationchange", function(e){
    /*
      // Method A:
      var s = document.documentElement.style;
      s.display = 'none';
      setTimeout(function(){ s.display = 'block'; }, 0);
    */
      // Method B:
      var d = document.documentElement;
      setTimeout(function(d){ d.className = d.className; }, 0);
    });
}

---

希望这有帮助。

尝试设置

溢出：隐藏

在

input

的父元素上，它对我起了作用。

愿意分享您找到的解决方案吗？我自己刚刚发现了这个问题，但似乎找不到任何解决办法。我一直在解决同样的问题。真痛苦！您可以使用

document.documentElement

而不是

getElementsByTagName

。谢谢我更新了示例，并修复了其中的一个小错误。：）此解决方案很好，但会产生短暂的“闪光”。您可以更简单地强制重新绘制：

if（/iPhone/.test（navigator.userAgent）&&！/Opera-Mini/.test（navigator.userAgent））{window.addEventListener（“方向更改”，函数（e）{var c=document.documentElement；setTimeout（函数（）{c.className=c.className；}，0）；}）；}）

将此应用于并修复了问题！经过几个小时的摸索后发现了这个！谢谢你的帮助！文字无法表达这是多么烦人，需要多长时间才能找到占位符属性的问题，以及在线找到这个特定答案有多困难。将

style=“overflow:hidden；”“

应用到包含

元素的

中，为我修复了它。这个答案需要更多的投票。一个非常令人沮丧的bug的简单解决方案。