代码之家 › 专栏 › 技术社区 › da5id

在IE7中消失提交按钮

submit internet-explorer-7 button css

da5id · 技术社区 · 16 年前

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;

6 回复 | 直到 16 年前

kapa 15 年前

你确定了吗 display:block 是否已添加到输入的css中?这就应该奏效了。

Jali 15 年前

这听起来像是一个文本缩进/图像来代替IE6.0和7.0中的按钮问题。这个解决方案对我有效过好几次。

为这些浏览器版本制作一个单独的样式表,并将以下代码放在标题中:

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

在CSS文件中,尝试类似这样的操作(您可以将其更改为input#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

Adam Hopkinson 16 年前

从代码中我可以看到两件事可能导致这种情况:

1-图像btn.search.gif要么是完全透明的,要么是背景颜色,要么是找不到。该按钮没有背景色和边框,因此如果没有图像/文本,则不会显示

2-按钮可见性设置为“无”,这会在页面上留下空间,但不会呈现按钮。你能看看firebug的风格吗?

da5id 16 年前

我最终通过删除以下内容对其进行了排序:

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

我在几年前的某个地方读过它后,总是将它包含在CSS图像替换中,但是忽略它似乎不会影响任何其他浏览器,并且已经修复了IE7中的问题。

scunliffe 16 年前

如果你加一个 名称属性 ,有效吗?

sfarbota 16 年前

Guillotine Bug . 这是IE6和IE7中的一个错误,当出现某些混合:悬停、浮动和布局时会发生(有关详细信息,请参阅链接)。我认为:

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

就在之前 </form> 然后对其应用以下CSS:

.clear {clear:both;}

我会修好的。