Попытка установить флажок asp для выравнивания в таблице в IE

Question

Я просмотрел другие похожие записи и не нашел решения.

У меня есть флажок asp, сгенерированный кодом позади. HTML, который он генерирует:

<span class="covered">
    <label for="">Multi</label>
    <input type="checkbox">
</span>

Содержится в ячейке таблицы:

<td>
    <input class="cniid" type="hidden" value="3375" name="">
    <input class="accid" type="hidden" value="759880" name="">
    <span class="covered">
        <label for="">Multi</label>
        <input type="checkbox">
    </span>
</td>

В Firefox это работает нормально:

Однако в IE он не выровнен:

Как я могу это исправить и заставить версию IE работать как версия FF?

Я не включил css, потому что там нет ничего релевантного - стиль вокруг td выглядит следующим образом:

.displaytable {font-size: smaller;}
body {color: #7B0343;font-family: "Tahoma","Lucida Grande","Segoe UI",Arial,Helvetica,Verdana,sans-serif;font-size: 14px;font-weight: bold;}

В этом случае классы больше используются для кода js, чем для стилей.

Добавлено js fiddle , которое показывает это. Я продолжу работать над скрипкой, чтобы уменьшить этот код до такой степени, что он все еще создает проблему. Так что есть нечто большее, но я попытался включить то, что мне нужно.

Answer 1

** Обновление после редактирования вопроса ** Глядя на скрипку, я могу воспроизвести эту проблему только на IE7 и ниже.Есть несколько проблем с IE7 и отображением CSS, см., Например, этот вопрос SO .

Этот ответ, похоже, действительно применим и к вашему коду.Я разбудил вашу скрипку и обновил CSS так, что он работает и в IE7. Это jsfiddle .Короче говоря, я заменил все ваши CSS на:

.covered input {
    float: right;
    display: inline-block; 
    zoom: 1;
    *display: inline; 
}
.covered label {  float: left; }

Оригинальный ответ :

Я вставил ваш код в this jsfiddle , который выглядит одинаково в IE9 и FF для меня.Некоторые вещи, которые могут быть проблемой:

• IE что-то кеширует (возможно, css), нажмите Ctrl + F5 или используйте F12, чтобы установить его на постоянное обновление
• Вы используетедругая версия IE, которая показывает это поведение (какие режимы у вас есть, если вы нажмете F12)
• CSS (наиболее вероятный источник, я думаю)

Если это действительно CSS, попробуйте:

• играя со свойством display span / label / input, а также шириной этих элементов
• , нажимая F12 в IE, выбирая элементы в TD, иосмотрите их стили, чтобы увидеть, что происходит
• , убирая его с вашего сайта по одному, пока вы не найдете ответственный код
• , устанавливающий что-то вроде span { border: 1px solid fuchsia; }, и dito для входных данных, метоки т. д.

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

Answer 2

Наконец-то нашли решение - спасибо тем, кто внес свой вклад. Проблема была в мошенничестве: прямо на входах. В Firefox это работает отлично и перемещает окно в правую часть ячейки. Однако в IE это вызывает видимые странности, перемещая ввод вправо на другой строке.

Я решил эту проблему, включив в свой файл CSS, определенный для IE, переопределив float и добавив некоторые отступы. Проблема заключается в том, что когда текст не имеет одинаковую длину, ящики не будут выстраиваться в ряд, поэтому я хотел разместить их справа. Но это придется делать.

Меня так расстраивает необходимость использовать эти скрипты IE, потому что основные браузеры не интерпретируют код одинаково или даже эквивалентно.