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

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

Синие прямоугольники - это временные стили тега <label>, а оранжевые линии - временные стили границ тегов <div> (чтобы я мог видеть, где они расширяются и ломаются). <label> стилизованы под 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 снова приходит на помощь!