1

みなさん、こんにちは。私が抱えている問題について誰かが洞察を提供してくれるのではないかと思っていましたが、頭を悩ませることはできません。

次の左側のメニューを確認してください。Chromeをレンダリングすると、下の検索が他の2つと視覚的に矛盾していることがわかるように、何らかの理由で[移動]ボタンが左に移動します。私がテストした他のすべてのブラウザ（IE8、IE9、Firefox）で動作します

http://imageshack.us/photo/my-images/14/renderaj.jpg/

マークアップは次のとおりです。

<div id="quickAccess" class="clearfix">

<div class="accessBox courseFinder">

<form id="course-finder" name="gs" method="GET" action="/future/course_search">
<input id="course-keyword-search-field" class="formField" type="text" title="Course Search" name="q" maxlength="256" value="">
<input class="formSearch" type="submit" name="btnG" value="GO">
<input type="hidden" name="entqr" value="0">
<input type="hidden" name="ud" value="1">
<input type="hidden" name="sort" value="date:L:d1">
<input type="hidden" name="output" value="xml_no_dtd">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="filter" value="0">
</form>

</div><!-- end accessbox coursefinder -->

<div class="accessBox askUs">

<form action="http://cit.edu.au/images/crm/search.php" method="post" id="askUs-form">
<input id="askus-keyword-search-field" class="formField" type="text" title="AskUs Search" name="askUsKeywords"/>
<input class="formSearch" type="submit" value="GO" />
</form>

</div><!-- end accessbox askus -->

<div class="accessBox search">

<form id="site-search" name="gs" method="GET" action="/home/site_search">
<input id="site-keyword-search-field" class="formField" type="text" title="Site Search" name="q" maxlength="256" value="">
<input class="formSearch" type="submit" name="btnG" value="GO">
<input type="hidden" name="entqr" value="0">
<input type="hidden" name="ud" value="1">
<input type="hidden" name="sort" value="date:L:d1">
<input type="hidden" name="output" value="xml_no_dtd">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="filter" value="0">
</form>

</div><!-- end accessbox search -->

</div><!-- end quick access -->
4

2 に答える 2

0

これはposition:absolute;、#quickAccess .accessBox input.formSearchforcssの使用が原因で発生しています。position:relative;

#quickAccess .accessBox input.formSearch {
    border-left:1px solid;
    border-right:1px solid;
    padding:0 5px;
    height:32px;
    margin:0 0 0 -4px;
    font-weight:bold;
    font-size:1.2em;
    position:absolute; /*<<<<< ----- It Should be position:relative*/
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-radius:0 5px 5px 0;
}

デモを参照してください：http：//jsfiddle.net/akhurshid/txRK9/4/

于 2012-07-19T04:46:31.847 に答える
0

これを実行して問題を解決できるようになりました

あなた #site-searchにposition与えるとあなたのボタンに与えるright :0; 

              #site-search{
        position:relative;
        }
    #quickAccess .search input.formSearch {
    right:0;
position:absolute; // you give to already 
    }
      #quickAccess .accessBox{
      width:187px;
      }

ライブデモ http://tinkerbin.com/KBGMIGbi

于 2012-07-19T04:30:48.517 に答える