在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中消失提交按钮

回答

相关问题