背景按鈕CSS問題

我申請一個CSS類這使得在瀏覽器類似下面這樣的asp.net自定義控件：背景按鈕CSS問題

<div class="box search_mlo"> 
<div class="gray_box"> 
    <div class="blue_box"> 
    <div> 
    <input id="Search_srcText" class="btn" type="text" onblur="return objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText"> 
    </input> 
    <a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k="> 
    <span>Search</span> 
    </a> 
    </div> 
</div> 
</div> 
</div>

的CSS類是：

.blue_box div a.btn 
{ 
background: url("/publish/images/btn_search.jpg") no-repeat; 
height: 36px; 
width: 86px;  
} 
.blue_box div input.btn 
{ 
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF; 
border: 1px solid #0064AD; 
color: #BFBFBF; 
float: left; 
font-size: 1.3em; 
font-style: italic; 
font-weight: bold; 
height: 21px; 
margin-right: 4px; 
margin-top: 2px; 
padding: 5px; 
width: 328px; 
}

所以它看起來像搜索框和按鈕提交。其他網站使用此控件，因此，對於某些網站，我們只需要超鏈接搜索按鈕，並且在某些情況下我們會替換圖像。但在這種情況下，我試圖取代圖像，但我只得到的圖像類似下面一半..

http://i.stack.imgur.com/Dfaqn.jpg

你可以看到一個搜索文本圖像裏面來了。

的原型是這樣和第一按鈕應與此：

http://i.stack.imgur.com/QpRmg.jpg

我不能去除存在錨定標記跨度標記，因爲在其他網站的工作的罰款，並移除會產生問題在他們。

任何人都可以幫助我找到整個圖像的可行解決方案。

在此先感謝。

來源

2011-09-16 Amin Sayed

[該Web蓋伊 - 避免DIV湯（http://www.thatwebguyblog.com/post/avoiding_div_soup） – feeela

感謝Feeela ..感謝您的幫助。。！ –

@Sayed; a標記是inline元素&內聯元素沒有取高度，寬度，垂直邊距&填充。所以;給display:block在你的CSS爲a標籤是這樣的：

.blue_box div a.btn 
    { 
     background: url("/publish/images/btn_search.jpg") no-repeat; 
     height: 36px; 
     width: 86px; 
     display:block 
    }

來源

2011-09-16 09:21:58 sandeep

非常好的Sandeep .. !!像zoom zoom zoom ..一樣工作！感謝..！！！ –

如果這有助於你接受:)謝謝 – sandeep

接受.. !!!非常感謝..！！ –

背景按鈕CSS問題

回答

相關問題