Chrome瀏覽器沒有正確渲染菜單圖形

大家好 - 我想知道是否有人能夠提供任何有關我遇到的問題的見解，這是我無法理解的。Chrome瀏覽器沒有正確渲染菜單圖形

看看下面的左邊菜單。當它呈現Chrome時，您可以看到底部的搜索與其他兩個視圖的視覺效果不一致，出於某種原因，「go」按鈕向左移動。它工作在我在測試它的所有其他瀏覽器（IE8，IE9，火狐）

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

來源

2012-07-19 Justin Newbury

哪裏是你的CSS ？最好在jsfiddle.net上創建一個小提琴 – 2012-07-19 04:22:01

它可能是寬度不一致，可能是由於大綱屬性。你可以發佈CSS嗎？ – 2012-07-19 04:22:56

是否有可能在瀏覽器中輸出HTML輸出而不是圖像？另外，*其中*是你的CSS？ – PhD 2012-07-19 04:23:05

現在即時通訊現在檢查你可以這樣做並解決你的問題

給你的#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-19 04:30:48

@Rohit，在Chrome中檢查它。 – 2012-07-19 04:38:49

Justin Newbury給出的代碼已經在Firefox中工作，但不在Chrome中。 – 2012-07-19 04:40:18

@ A.K現在檢查現場演示http://tinkerbin.com/KBGMIGbi這是工作鉻.. – 2012-07-19 04:42:36

這是發生由於使用的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/

來源

2012-07-19 04:46:31

Chrome瀏覽器沒有正確渲染菜單圖形

回答

相關問題