在IE7中消失提交按鈕

問候。我遇到了以下遺留代碼的問題。除了IE7，其中提交按鈕消失的地方，沒有問題。空間仍然留在頁面上，但不顯示。我嘗試過強制hasLayout的各種方式，但沒有成功。有什麼建議麼？在IE7中消失提交按鈕

XHTML（XHTML 1.0嚴格的DOCTYPE）：

<div id="headerFunctionality" class="clearfix"> 
<div id="headerSearch" class="clearfix"> 
<form action="http://foo.com" method="GET"> 
<label for="q">Search</label> 
<input id="q" name="q" type="text" class="text" /> 
<input type="submit" id="btn_search" value="Search"> 
</form> 
</div> 
</div>

CSS：

#headerFunctionality { 
    float: right; 
    display: inline; 
    margin: 24px 14px 25px 0; 
} 

#headerSearch{ 
    float: left; 
    margin-left: 20px; 
    width: auto; 
} 

#headerSearch label{ 
    position: absolute; 
    top: -5em; 
    color: #FFF; 
} 

#headerSearch input.text{ 
    width: 133px; 
    height: 18px; 
    border: 1px solid #999; 
    font-size: 0.69em; 
    padding: 2px 3px 0; 
    margin: 0 6px 0 0; 
    float: left; 
} 

/* Replace search button with image*/ 
input#btn_search { 
    width: 65px; 
    height: 20px; 
    padding: 20px 0 0 0; 
    margin: 1px 0 0 0; 
    border: 0; 
    background: transparent url(../images/btn.search.gif) no-repeat center top; 
    overflow: hidden; 
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
} 
form>input#btn_search { /* For non-IE browsers*/ 
    height: 0px; 
} 

input#btn_search:focus, input#btn_search:hover { 

background: transparent url(../images/btn.search.over.gif) no-repeat center top;

}

來源

2009-10-29 da5id

我終於來分類的作法是刪除：

form>input#btn_search { /* For non-IE browsers*/ 
    height: 0px; 
}

我讀它的地方，很久以前，但離開它似乎並沒有影響到任何其他瀏覽器後，總是包含在本使用CSS圖片更換和已經解決了IE7中的問題。

來源

2009-10-29 23:21:29 da5id

有兩件事情我可以從代碼中看到可能導致此：

1 - 圖像btn.search.gif要麼是完全透明的，要麼背景的顏色不是f ound。該按鈕沒有背景顏色，也沒有邊框，因此如果不是圖像/文字，則不會出現。

2 - 按鈕可見性設置爲無，這會在頁面上留下空間，但不會呈現按鈕。你可以看看螢火蟲的風格嗎？

來源

2009-10-29 22:17:00

哈，我的第一個想法太多，但遺憾的是沒有這些。我甚至嘗試將可見性明確地設置爲「可見」。該問題是*只*在IE7中。 – da5id 2009-10-29 22:26:40

如果您添加一個名稱屬性，它工作嗎？

來源

2009-10-29 22:32:00 scunliffe

乾杯，好想法，但可悲的是:( – da5id 2009-10-29 22:33:46

該問題可能來自Guillotine Bug。這是IE6和IE7中的一個錯誤，當某些混合：懸停，浮動和佈局存在時會發生（詳情請參閱鏈接）。我相信，這將：

<div class="clear"><!-- --></div>

權</form>前，然後將下面的CSS它：

.clear {clear:both;}

會解決它。

來源

2009-10-29 23:07:01 sfarbota

感謝您的輸入和鏈接，但也沒有做到這一點，我終於修好了，並會發布答案。 – da5id 2009-10-29 23:19:08

你確定display:block已被添加到輸入的CSS？那應該做的伎倆。

來源

2010-11-03 04:28:46

這聽起來像是IE6.0和7.0中的文本縮進/圖像替換按鈕問題。這個解決方案已經爲我工作了幾次。

使這些瀏覽器版本一個單獨的樣式表，並把這個代碼在你的頭：

<!--[if lt IE 8]> 
     <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]-->

在CSS文件，嘗試這樣的事情（你可以將其更改爲輸入＃btn_search或任何你專門針對）

#btn_search { 
    width: 85px; 
    height: 20px; 
    padding: 20px 0 0 0; 
    margin: 1px 0 0 0; 
    border: 0; 
    background: transparent url(../images/btn.search.gif) no-repeat center top; 
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
    font-size: 0; 
    color: #fff; 
    text-align: right; 
    text-indent: 0; 
}

「顏色」應該與您的背景顏色相同。

「寬度」應該比圖像的寬度大20-30像素。

更多信息和幫助可以在這裏找到：http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

來源

2011-04-28 15:44:49 Jali

在IE7中消失提交按鈕

回答

相關問題