Исчезающая кнопка отправки в IE7

Question

Привет. У меня проблемы со следующим устаревшим кодом. Это нормально во всем, кроме IE7, где кнопка отправки исчезает. На странице все еще остается место, но оно не отображается. Я пробовал разные способы заставить hasLayout, но безуспешно. Есть предложения?

XHTML (XHTML 1.0 Strict 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;

}

Answer 1

Вы убедились, что display:block был добавлен в CSS на входе? Это должно сделать трюк.

Answer 2

Звучит как проблема с отступом текста / изображением для замены кнопки в 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

Answer 3

Я наконец-то отсортировал это, удалив:

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

Я всегда включал это в замены изображений CSS после того, как читал его где-то давным-давно, но, похоже, его отсутствие не повлияло ни на один другой браузер и устранило проблему в IE7.

Answer 4

Есть две вещи, которые я могу видеть из кода, который может вызвать это:

1 - изображение btn.search.gif либо полностью прозрачное, либо цвет фона, либо не найден. Кнопка не имеет цвета фона и рамки, поэтому не будет отображаться, если не для изображения / текста

2 - видимость кнопки не установлена, что оставляет место на странице, но не отображает кнопку. Можете ли вы взглянуть на стили в Firebug?

Answer 5

Скорее всего, проблема связана с гильотиной . Это ошибка в IE6 и IE7, которая возникает, когда присутствуют определенные сочетания: hover, float и layout (подробности см. По ссылке). Я считаю, что вставив это:

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

прямо перед </form> и последующим применением к нему следующего CSS:

.clear {clear:both;}

исправит это.

Answer 6

если добавить имя атрибута , это работает?