加载页面时，搜索栏在加载但看起来很奇怪时看起来很好

Question

每次我加载我的网站或浏览搜索栏时，按钮都会从不同的地方加载，然后在加载错误后移回原位置？请参阅图片以了解我的意思

http://i.stack.imgur.com/hNvGh.png

HTML代码：

<form class="searchautocomplete UI-SEARCHAUTOCOMPLETE" action="/catalogsearch/result/" method="get" data-tip="What are you shopping for?" data-url="/searchautocomplete/ajax/get/" data-minchars="3" data-delay="300">


    <div class="nav">

                <div class="nav-search-in">
            <span class="category-fake UI-CATEGORY-TEXT">All</span>
            <span class="nav-down-arrow"></span>
            <select name="cat" class="category UI-CATEGORY" style="width: 52px;">
                <option value="0">All</option>
                                <option value="3">
                    Appliances                </option>
                                <option value="4613">
                    Books                </option>
                                <option value="11778">
                    Camera &amp; Photo                </option>
                                <option value="13675">
                    Computers &amp; Accessories                </option>
                                <option value="43960">
                    Video Games                </option>
                                <option value="44397">
                    Watches                </option>
                            </select>
        </div>

        <div class="nav-input UI-NAV-INPUT" style="padding-left: 52px;">
            <input class="input-text UI-SEARCH" type="text" autocomplete="off" name="q" value="" maxlength="128">
        </div>

        <div class="searchautocomplete-loader UI-LOADER" style="display:none;"></div>

    </div>
    <div class="nav-submit-button">
        <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>    </div>
    <div style="display: none;" class="searchautocomplete-placeholder UI-PLACEHOLDER"></div>
</form>

CSS代码：

.searchautocomplete {
float: left;
text-align: left;
box-shadow: none;
font-family: helvetica,arial,sans-serif;
position: relative;
background: none;
margin: 8px 20px 7px 20px;
}

.searchautocomplete .nav {
background: url('/skin/frontend/default/galaopendeal/images/bkg-shadow.png');
float: left;
height: 29px;
position: relative;
}

.searchautocomplete .nav .nav-input {
margin: 6px 0px 0px 10px;
padding: 0px 5px 0px 5px;
z-index: 12;
position: relative;
margin-top: -2px;
}

.searchautocomplete button.button {
width: 100px;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.searchautocomplete button.button, button.button.btn-cart {
background: #0085fb;
color: #ffffff;
border: 1px solid #0085fb;
font: bold 12px/1.35 Helvetica, Arial, sans-serif;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

.searchautocomplete .searchautocomplete-loader {
position: absolute;
top: 6px;
right: 10px;
width: 16px;
height: 16px;
background: url('../../../images/mirasvit/loader.gif');
}

.searchautocomplete .searchautocomplete-placeholder {
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #FFF;
border: 1px solid #ccc;
padding: 15px 10px 5px 10px;
margin-top: 45px;
width: 100%;
z-index: 102;
position: absolute;
}


.searchautocomplete .nav .nav-search-in {
position: relative;
float: left;
top: -3px;
left: -3px;
z-index: 15;
}

.searchautocomplete .nav .nav-search-in .category-fake {
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
background-color: #fcfcfc;
background-image: -moz-linear-gradient(top, #ffffff, #f7f7f7);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f7f7f7));
background-image: -webkit-linear-gradient(top, #ffffff, #f7f7f7);
background-image: -o-linear-gradient(top, #ffffff, #f7f7f7);
background-image: linear-gradient(to bottom, #ffffff, #f7f7f7);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff7f7f7', GradientType=0);
border-right: 1px solid #dddddd;
color: #777;
cursor: pointer;
float: left;
font: normal 17px/1.35 Arial, Helvetica, sans-serif;
height: 27px;
line-height: 27px;
margin: 4px 0px 0px 2px;
padding: 0px 25px 0px 10px;
text-align: center;
white-space: nowrap;
}

.searchautocomplete .nav .nav-search-in .nav-down-arrow {
background: url('../../../images/mirasvit/sprite.png');
width: 9px;
height: 5px;
background-position: -26px -34px;
display: block;
right: 10px;
top: 16px;
position: absolute;
}

.searchautocomplete .nav .nav-search-in .category {
opacity: 0;
filter: alpha(opacity=0);
background: white;
border: 1px solid #DDD;
color: black;
cursor: pointer;
height: 29px;
left: 5px;
margin: 0;
outline: 0;
padding: 0;
position: absolute;
top: 5px;
visibility: visible;
width: auto;
}

JSFiddle可能会派上用场： http://jsfiddle.net/V4ZH9/

这个搜索栏驱使我疯了，请帮忙花了很多时间来修复它，但我不熟悉CSS而且我更改代码的工作越差