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

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

0 голосов
/ 18 февраля 2011

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

У меня проблемы с форматированием кнопок в форме, но тольков 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, где я отлично использую background-image, и другие места, где я также установил границы.Я скопировал и вставил код 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>

Я остановилсядекларация типа документа.

Ответы [ 3 ]

0 голосов
/ 18 февраля 2011

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

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

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

        text-indent: -9999px
0 голосов
/ 18 февраля 2011

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

border: 0 solid #000

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

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

0 голосов
/ 18 февраля 2011

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

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

Проблема с этим способом, однако, заключается в том, что состояние ролловера должно быть сделано с помощью кода JavaScript. Если вам нужно больше контроля над кнопкой с помощью CSS, вы также можете использовать тег

...