logo标签列表

iOS 6中文本输入框的占位符属性在从横屏切换到竖屏时的问题

htmlios6landscapeviewportplaceholder
7

我在升级到iOS 6后遇到了一个问题，这让我很困扰。

似乎每当我在输入字段上使用“placeholder”属性，并从竖屏旋转到横屏再返回竖屏时，页面左侧会发生一些像素位移，导致出现水平条。

经过长时间的研究，我得出结论，这肯定是与meta视口有关，因为每次使用content="width=device-width"时，一切都正常。

P.S 是的，我真的需要在输入框中使用百分比宽度，以实现流体设计：）

以下是重现此问题的示例。谢谢...

<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>
我很痛心，花了将近3天的时间才发现占位符是导致像素偏移的问题所在。这个bug是否在苹果网站上有记录？ - Abadaba
你好 Abadaba，据我所知这并没有记录在文档中。我只是在这里报告一下，以节省一些人的时间…… - alexd
4个回答
5
在容器元素上应用 "overflow: hidden;" 可以解决我的问题。
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);
        }
    })
}
1
希望看到一个非 JS 的解决方案。 - Abadaba
那是一个有效的答案。谢谢你。 - alexd
3

CSS修复：

body>div {
    overflow-y: auto;
}
0

非 JS 解决方案

将 overflow:hidden 添加到父元素中，它将像魔法一样工作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接