iOS webkit输入字段损坏

Question

我有一个使用以下html呈现的输入字段：

<nav>
            <ul>
              <li><a href="<?php echo home_url( '/' ); ?>wp-login.php?action=register">add story</a></li>

              <li id="search"> <a href="#">search</a>
                <ul >
                    <li><form action="<?php echo home_url( '/' ); ?>" method="get" id="searchFrm"><input id="search_input"type="text" name="s" id="keyword"/><input type="submit" value="Go"></form></li>
                </ul>
              </li> ...

使用jQuery的toggleSlide函数对ul进行动画处理：

 $('nav ul li#search a').click( function () {

    //show its submenu
    var target = $('nav ul li#search ul');
    target.slideToggle(100);
    $('nav ul li#highlight ul').slideUp(100);
    target.find('#search_input').focus();

}

）;

 $('nav ul li#highlight a').click( function (event) {

    $('nav ul li#search ul').slideUp(100);
    $('nav ul li#highlight ul').slideToggle(100);
}

）;

显示屏幕键盘时，文本框中的光标会显示在框的下方，并且键入的文本会损坏（请参阅附带的屏幕截图）。有谁知道可能导致这种情况的原因？

当您在屏幕键盘上点击'u'时，字符会在输入字段中正确显示。

更新

按要求提供Css

nav {
    float: right;
    margin-top: 19px;
}

nav ul li{
    float: left;
    display: block;
    position:relative;
    margin-left: 10px;
    padding-left: 5px;
}

nav ul li a{
    display: block;
    padding: 0;
    height:23px; 
    text-decoration:none;
    text-align: center;
    color: #405ab1;
    margin-bottom: -15px;
}

nav ul li ul{
    display: block;
    list-style: none;
    padding: 10px;
    position: absolute;
    background-color:#FFF;
    width: 170px;
    border: 1px solid #CCC;
    z-index: 100;
    display: none;
    margin-top: 0px;

}

nav ul li ul li{
    display: block;
    margin: 0;
    padding: 0;
}