Css 在移动浏览器上单击时，输入图像会移动

我在WordPress博客上有一个搜索表单，输入的图像有onmouseover和onmouseout事件。在这些事件期间，这些图像的位置不应改变。在我的桌面上，一切都很好，图像会发生变化，但不会移动。然而，在我的手机浏览器Chrome上，在三星Galaxy S4上，一旦单击输入图像执行搜索，输入图像就会从div中弹出，并成为未加载的图像

这是HTML：

如果你在手机浏览器上点击，并使用搜索表单，你可以准确地看到我在说什么

---

我只想知道如何阻止图像从div中弹出，以及为什么在移动浏览器上不加载onmouseover图像。

图像换行到第二行的问题并不特定于移动浏览器。当我减小页面宽度时，问题也会出现。在常规浏览器上，无论大小，鼠标悬停时的图像变化似乎也能正常工作。确定。是否有任何原因使其在单击时换行到第二行？

<div class="searchform-div">
    <form method="get" class="searchform" action="<?php echo home_url(); ?>/">
        <input type="search" id="s" name="s" placeholder="Search. . .">
        <input type="image" id="searchButton" src="<?php bloginfo('template_directory'); ?>/images/searchbutton.png" onmouseover="this.src='<?php bloginfo('template_directory'); ?>/images/searchbuttonhover.png'" onmouseout="this.src='<?php bloginfo('template_directory'); ?>/images/searchbutton.png'">
    </form>
</div>

.searchform {
    width:   100%;
    height:  27px;
    padding: 3px 10px 0 0;
        box-shadow:        inset 2px 2px 3px 0 #7b7b7b;
        -moz-box-shadow:       inset 2px 2px 3px 0 #7b7b7b;
        -webkit-box-shadow:    inset 2px 2px 3px 0 #7b7b7b;
    background-color:      #ECECEB;
    -webkit-border-radius: 3px;
    -moz-border-radius:    3px;
    -o-border-radius:      3px;
    border-radius:         3px;
}

.searchform-div {
    width:     100%;
    height:    34px;
    margin:    10px 0 10px 0;
    max-width: 850px;
}

#s {
    margin-left:      3px;
    padding-top:      2px;
    background-color: #ECECEB;
    width:  94%;
    height: auto;
}

#s:focus {
    outline-color: #ECECEB;
}

#searchButton {
    margin-bottom: -6px;
    background-color: #ECECEB;
}