Исчезающая кнопка отправки в 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

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

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

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

Answer 2

ты убедился в этом display:block был добавлен в CSS на входе?Это должно сработать.

Answer 3

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

прямо перед </form> а затем применив к нему следующий CSS:

.clear {clear:both;}

исправил бы это.