Форма выглядит в ie7. css помогите. (скриншот вкл.)

Question

Вот jfiddle: http://jsfiddle.net/sPBtg/1/

В IE7 поле ввода для теста опускается вниз, и я не могу понять, почему он это делает.Вот скриншот того, что я имею в виду:

Что мне нужно изменить?

Кроме того, я заметил, что в инструменте разработчика IE7 я получаюстранный пустой текстовый узел.Если я удаляю этот текстовый узел через инструмент разработчика, все снова работает правильно.

Answer 1

Попробуйте вытащить поле ввода за пределы диапазона.Вам также действительно нужен только один интервал, чтобы обернуть текст метки.Попробуйте что-то вроде:

<p class="quiz-wrap">
<span class="wpcf7-quiz-label">10+10=</span>
<input type="text" class="wpcf7-quiz" name="quiz">
<input type="hidden" value="996f7d842c0e718f50c0d1890f7adb57" name="_wpcf7_quiz_answer_quiz">

   .quiz-wrap {
    float: left;
    margin:0; 
   }

.wpcf7-quiz-label {
    color: #848383;
    float: left;
    font-size: 0.9em;
    line-height: 19px;
}

.quiz-wrap input {
    float: left;
    margin: 0 0 0 5px;
    padding: 3px;
    width: 30px;
}

    input {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #232323;
    border: 1px solid #4D4D4D;
    color: #F5F5F5;
    display: block;
    font-size: 1em;
   }

Есть ли конкретная причина, по которой викторина была позицией: относительная?Я не видел никакого реального использования этого в вашем образце, поэтому я удалил его.Возможно, вам придется проверить вкладку макета в инструментах разработчика IE, чтобы увидеть, устанавливает ли ваш браузер поле или другое смещение в верхней части поля ввода.