Question

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

查看以下左侧菜单。当它呈现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 -->

Answer 1

现在我正在检查你可以做到这一点并解决你的问题

将 #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

Answer 2

由于使用position:absolute; #quickAccess .accessBox input.formSearch css使其成为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/

Chrome无法正确呈现菜单图形

2 个答案: