7

更新到 iOS 6 后，我遇到了一个让我发疯的问题。

看起来任何时候我在输入字段上都有属性“占位符”，同时从纵向旋转到横向并再次回到纵向时，页面会在左侧移动一些像素，从而导致水平条。

经过长时间的研究，我得出结论，它必须与元视口相关，因为每次我使用 content="width=device-width" 时都可以正常工作。

PS是的，我真的需要在输入上有一个百分比宽度，以便进行液体设计:)

这是重新创建问题的示例。谢谢...

<html>
<head>
    <title>test</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
</head>
<body>

    <div style="width:100%;background-color:red">
        <input id="testInput"  placeholder="test" style="width:90%;" />
    </div>
</body>
</html>
4

4 回答 4

5

应用“溢出：隐藏；” 在包含元素上为我解决了这个问题。

于 2012-12-01T04:06:46.230 回答
4

我发现了这个问题。并修复它。

（网址：http ://mooki83.tistory.com/2656550 （韩文））

测试网址： http ://mooki83.da.to/m/testios6.html

javascript：

/* Optimized PLACEHOLDER for iOS6 - Mooki ( http://mooki83.tistory.com ) */


$(document).ready(function(){
    $(window).bind("orientationchange.fm_optimizeInput", fm_optimizeInput);
});

function fm_optimizeInput(){
    $("input[placeholder],textarea[placeholder]").each(function(){
        var tmpText = $(this).attr("placeholder");
        if ( tmpText != "" ) {
            $(this).attr("placeholder", "").attr("placeholder", tmpText);
        }
    })
}
于 2012-09-28T01:47:42.063 回答
3

CSS 修复：

body>div {
    overflow-y: auto;
}
于 2012-11-14T14:36:10.910 回答
0

非js回答

添加overflow:hidden到父元素，它会像一个魅力

于 2013-06-19T06:38:40.173 回答