1

大家好 - 我想知道是否有人可以对我遇到的问题提供任何见解，我无法理解。

查看以下左侧菜单。当它呈现 Chrome 时，您可以看到底部搜索与其他两个在视觉上不一致，“go”按钮出于某种原因悬停在左侧。它适用于我测试过的所有其他浏览器（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

现在我现在检查你可以这样做并解决你的问题

给你 #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 回答
0

这是由于使用position:absolute;for #quickAccess .accessBox input.formSearchcss make itposition: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 回答