Почему плавающий элемент управления <input> в плавающем элементе сдвигается слишком далеко вправо в IE7, но не в Firefox?

Question

Надеюсь, изображение стоит тысячи строк кода, потому что я не хочу убирать весь код ASP.Net, HTML, JavaScript и CSS, чтобы предоставить пример (но я предоставлю все, что смогу, по запросу). если кто-то не говорит: «О, я это уже видел!Попробуйте это...") [На самом деле я опубликовал немного кода и CSS — см. конец вопроса].

Вот часть страницы формы, отображаемой в Firefox:

Синие прямоугольники — это временные стили <label> тег и оранжевые линии — это временные стили границ <div> теги (чтобы я мог видеть, где они расширяются и ломаются).А <label>'s стилизованы под float: left как и <divнаходится справа.Кроме того, потомок элементов управления <div> являются также float:left чисто для того, чтобы они выстроились в ряд наверху <div> (поскольку внизу есть более высокие элементы управления, такие как многострочные текстовые поля).

Переключатели создаются элементом управления ASP, поэтому они заключены в <span> - также сместился влево, поскольку является потомком <div>.

Вот та же часть экрана, отображаемая в IE7:

Есть несколько незначительных различий в рендеринге, но самая большая из них сводит меня с ума — это лишнее пустое пространство рядом с <input> контролирует!Обратите внимание, что <span>вокруг переключателей и флажков выстраиваются правильно.

Хотя они и не отображаются, то же самое происходит с раскрывающимися списками и полями списков.Я не пробовал обертывать элементы управления вводом в <span>, но это может сработать.Однако это уродливый хак.

Я попробовал несколько обходных путей IE7 для устранения проблем с коробкой и редактировал CSS, пока не перешел в чистый режим вуду (т. е. вносил случайные изменения в надежде, что что-то сработает).Как я уже сказал, я надеюсь, что кто-нибудь посмотрит на это и скажет: «Я видел это раньше!Попробуй это..."

Любой?

Продолжение 1:

Я использую XHTML 1.0 Transitional. <DOCTYPE>, поэтому я должен быть в стандартном режиме.

Продолжение 2:

Вот небольшой фрагмент сгенерированного кода для вышеизложенного (первый элемент управления и последний элемент управления).Обратите внимание, что этот код был создан ASP.Net, а затем динамически отредактирован с помощью JavaScript/jQuery.

 <fieldset id="RequestInformation">
   <legend>Request Information</legend>
   <ol>
     <li>
       <label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
       <div class="FormGroup">
         <input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker" 
           type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
         <img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
         <span id="txtRequestDate_error"/>
       </div>
     </li>
     --STUFF DELETED HERE--
     <li>
       <label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
       <div class="FormGroup">
         <span class="stdCheckBox">
           <input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
         </span>
       </div>
     </li>
   </ol>
 </fieldset>

Вот соответствующая часть CSS (я дважды проверил, чтобы убедиться, что это дублирует проблему):

div
{
    border-style: solid;
    border-width: thin;
    border-color:Orange;
}

label
{
    border-style: solid;
    border-width: thin;
    border-color:Blue;
}

.FormGroup
{
    float:left;
    margin-left: 1em;
    clear: right;
    width: 75em;
}

.FormGroup > *
{
    float:left;
    background-color: Yellow;
}

fieldset ol
{
    list-style: none;
} 

fieldset li
{
    padding-bottom: 0.5em;
} 

li > label:first-child
{
    display: block;
    float: left;
    width: 10em;
    clear: left;
    margin-bottom: 0.5em;
}

em
{
    color: Red;
    font-weight: bold;
}

Решение!

Мэтью указал мне на эту страницу IE/Win унаследовал поля на элементах формы и в этом была проблема.Поля ввода наследовали левые поля всех содержащихся в них элементов.Решение, которое я выбрал, заключалось в том, чтобы обернуть каждый <input> элемент в нестилизованном виде <span>.Я пытался сохранить структуру HTML как можно более семантически обоснованной, поэтому решил ее с помощью команды jQuery в $(document).ready() функция:

//IE Margin fix: 
//  http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
    if($.browser.msie){
        $(":input").wrap("<span></span>");
    }
});

Обратите внимание, что это только добавит глупости <span>это в IE...

StackOverflow снова приходит на помощь!

Answer 1

А input наследует поля от окружающих div и ol.Если вы окружите его другим тегом, например span или div, это должно решить вашу проблему.

Редактировать: Дополнительную информацию и обходные пути можно найти на странице http://www.positioniseverything.net/explorer/inherited_margin.html