Базовая отладка CSS в Internet Explorer 8 с использованием режима совместимости

Ладно, я не делаю здесь ничего особенного, но меня сводит с ума то, что я не могу заставить его работать.

У меня проблемы с форматированием кнопки в форме, но только в Internet Explorer 7.

У меня есть простая форма:

<div id="menusearch">
     <form id="searchform" method="get" action="process.php">
        <div>
            <input type="text" value="" name="s" id="s_name" class="input_text"  />
            <input type="submit" class="button submit" accesskey="s" value="" />
        </div>
    </form>
</div>

CSS для кнопки выглядит следующим образом:

#menusearch .button {
    margin: 0;
    width:97px;
    height:30px;
    background-image: url('images/search.png');
    background-repeat:no-repeat;
    background-position:left top;
    border: none;
}

Фоновое изображение представляет собой простое изображение кнопки, но в Internet Explorer 7 отображается стандартная кнопка по умолчанию без изображения. Он работает в любом другом браузере, в котором я его пробовал. Буду признателен за помощь.

Теперь я использую Internet Explorer 8 (режим совместимости) и инструменты разработчика, чтобы проверить его и посмотреть, что происходит не так, и я заметил кое-что странное. Некоторые строки CSS, похоже, игнорируются. Например, в приведенном выше примере инструмент разработчика выглядит следующим образом:

background-image: url(images/search.png); BORDER-BOTTOM-STYLE: none

И он показывает все это как одну строку без галочек, как будто он не распознает это как отдельные правила CSS. Я могу найти другие места в моем CSS, где я отлично использую фоновое изображение, и другие места, где я также установил границы. Я скопировал и вставил код CSS и все равно получаю те же ошибки.

Что я делаю неправильно?

ИЗМЕНИТЬ

Хорошо, я разобрал его и обнаружил, что моя проблема на самом деле в моей объявлении типа документа,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Я удаляю его, и он работает. Итак, мне нужно изменить свой первоначальный вопрос на следующий: какой должна быть моя декларация типа документа? Я никогда не понимал разные и всегда использовал один и тот же...

Итак, урезанный исходный код по запросу:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            #menusearch .button {
                margin: 0;
                width:97px;
                height:30px;
                background-image: url('http://www.netbsd.org/images/download-icon-orange.png');
                background-repeat:no-repeat;
                background-position:left top;
                border: none;
            }
        </style>
    </head>
    <body>
        <div class="hspace">
            <div id="mspace">
                <div id="menu">
                    <div id="menusearch">
                        <form id="searchform" method="get" action="process.php">
                            <div>
                                <input type="text" value="" name="s" id="s_name" class="input_text"  />
                                <input type="submit" class="button submit" accesskey="s" value="" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>

Я отказался от объявления типа документа.


css doctype internet-explorer-7 ie8-compatibility-mode
person TH1981    schedule 18.02.2011    source источник
comment
Я не уверен, но я думаю, что это просто Инструменты разработчика IE ведут себя судорожно. Не думаю, что это имеет отношение к вашей проблеме. Если бы вы могли создать пример страницы на JS Bin, я посмотрю.   -  person thirtydot    schedule 18.02.2011
comment
здорово. Я начал беспокоиться, что делаю что-то не так, тем более, что это появлялось прямо там, где была моя проблема с форматированием. Сейчас я выгляжу как JS Bin. Благодарность!   -  person TH1981    schedule 18.02.2011
comment
ладно, теперь я раздражен. Я не могу заставить его воспроизвести в JS Bin. гррр.   -  person TH1981    schedule 18.02.2011
comment
Возьмите свою страницу с ошибкой. Выньте как можно больше вещей, убедившись, что проблема все еще существует. Разместите код внутри файла в своем вопросе.   -  person thirtydot    schedule 18.02.2011
comment
Спасибо, тридцатьдот. Я глуп и забываю, как разобрать его, чтобы найти проблему. Похоже, это был тип документа, который играет роль. обновил вопрос, чтобы отразить это.   -  person TH1981    schedule 18.02.2011
comment
Этот тип документа вызовет (почти?) Стандартный режим в IE. Если вы полностью удалите эту строку типа документа, вы перейдете в режим Quirks. Так что, видимо, он работает в причудливом режиме, но не в стандартном. На этом этапе было бы очень полезно увидеть вашу уменьшенную страницу тестового примера.   -  person thirtydot    schedule 18.02.2011

Ответы (3)


arrow_upward
0
arrow_downward

Исправление в этом случае удивительно просто. Измените свой border следующим образом:

border: 0 solid #000

И это исправлено. Кто знает почему, IE7 сумасшедший.

Вы можете сохранить исходный тип документа.

person thirtydot    schedule 18.02.2011

arrow_upward
0
arrow_downward

Возможно, вам будет лучше использовать input type="image", который может взять изображение src следующим образом:

<input type="image" src="/path/to/image.png" value="Submit" />

Однако проблема с этим способом заключается в том, что состояние ролловера должно быть выполнено с помощью кода JavaScript. Если вам нужно больше контроля над кнопкой с помощью CSS, вы также можете использовать тег ‹button>, который Internet Explorer может стилизовать лучше, чем стандартный input type="submit".

person sweetroll    schedule 18.02.2011
comment
Я стараюсь избегать использования javascript там, где CSS может выполнять эту работу, например, с ролловерами. Однако я только что обнаружил, что, по-видимому, задавал неправильный вопрос. Спасибо хоть! - person TH1981; 18.02.2011

arrow_upward
0
arrow_downward

Вот как я решил это для своего случая,

  1. Добавьте значение ='Submit or whatever'.

  2. Добавьте этот CSS к кнопке,

        text-indent: -9999px
person Zayar    schedule 18.02.2011