Исправление странного поведения с плавающей точкой в ​​IE7 - PullRequest
Новая
       26

Исправление странного поведения с плавающей точкой в ​​IE7

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

Здесь уже много плавающих вопросов по IE7.

Я прочитал некоторые из них, но все еще не могу найти решение моей проблемы.

Если вы просматриваете эту страницу в IE8, Firefox и Chrome.

http://pastehtml.com/view/1devx12.html

Все они отображаются правильно.

Но если вы посмотрите в IE7, это будет выглядеть так:

http://img713.imageshack.us/i/ietesterie7.jpg/

Все метки отображаются в первой строке, что явно не соответствует ожиданиям.

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

Какие CSS следует добавить, чтобы решить проблему?

Большое спасибо всем вам.

1 Ответ

1 голос
/ 27 февраля 2011

Попробуйте оформить свои флажки немного по-другому.Оберните этикетку вокруг ввода - это будет держать их вместе.Кроме того, вместо того, чтобы размещать их в DIV, попробуйте оформить их в неупорядоченном списке.

Смотрите живую демонстрацию здесь (не тестировал в IE - он не установлен на Mac - но должен работать)http://jsfiddle.net/wG7B2/

HTML: 

<ul>
    <li>
    <label for="checkbox1"><input id="checkbox1" type="checkbox" value="">Option1</label>
    </li>
    <li><label for="checkbox2"><input id="checkbox2" type="checkbox" value="">Option2</label>
    </li>
    <li><label for="checkbox3"><input id="checkbox3" type="checkbox" value="">Option3</label>
    </li>
</ul>

CSS 

ul{
    list-style:none;
    padding:0;
    margin:0;
}

ul li{
    padding-bottom:10px;
}

ul li:last-child{
    padding-bottom:0px;
}

ul li input{
    margin-right:5px;
}
...