消失提交按钮在IE7
-
22-07-2019 - |
题
问候。我有麻烦了以下遗留的代码。这是现在的一切,除了IE7,其中提交按钮就会消失。空间仍然是留给它的网页,但它并不显示。我已经尝试了各种方式的强迫hasLayout,但没有成功。任何建议?
XHTML(XHTML1.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;
}
解决方案 4
我最后,除去排序这样:
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
我一直包括在此与CSS图片更换阅读它的地方,很久以前的事之后,却留下它似乎并没有影响到任何其他的浏览器,并已在IE7中修复了这个问题。
其他提示
让你确信display:block
已被添加到输入的CSS?即现在应该做的伎俩。
这听起来像一个文本的缩/图像,以替换键问题在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;
}
"颜色"应该是相同的颜色以你的背景。
"width"应该像有20-30素更多的宽度比你的形象。
更多的信息,并帮助可以在这里找到: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
有两件事我可以从代码中看到,可能导致这样的:
1 - 图像btn.search.gif要么是完全透明的,背景的颜色或没有找到。按钮没有背景颜色和无边框,因此,如果不将不会出现在图像/文本
2 - 按钮能见度设置为无,这使在网页空间,但不显示该按钮。你可以看一下样式的萤火虫?
如果您添加的 name属性后,它的工作原理?
在问题可能来自闸刀错误。这是一个在IE6和IE7时的某些混合物发生了一个错误:悬停,float和布局是本(参见链接的详细信息)。我相信,此插入:
<div class="clear"><!-- --></div>
右</form>
之前,然后应用以下CSS它:
.clear {clear:both;}
将修复它。