Очистить поплавки с помощью CSS и IE7?

317
Craig Johnstone

Я целый день бился головой, пытаясь заставить поплавки и очистки работать должным образом в старых версиях Internet Explorer. Я прочитал множество уроков по использованию .clear: после трюка и т. Д., Но я не могу заставить что-либо работать!

У меня есть HTML, как это:

<div id="section"> <h2>Section Title</h2>  <label for="name">Name</label> <input type="text" id="name" />  <label for="dob">Date of Birth</label> <input type="text" id="dob" />  <label for="email">Email</label> <input type="text" id="email" /> </div>

И CSS, как это:

#section  #label #input

В современных браузерах, например Opera 25, отображается следующее:

Name [Name field] Date of birth [Date of birth field] Email [Email]

В более старых версиях Internet Explorer (6 или 7) он отображается как:

Name [Name field] [Date of birth field] [Email field] Date of birth E-mail

Я стараюсь не корректировать свой HTML, кто-нибудь может мне помочь с исправлением CSS?

-3
Я бы изменил HTML. Я имею в виду, ради Dave 10 лет назад 0
Спасибо, я знаю, что могу это исправить, добавив в HTML дополнительные DIV, но я стремлюсь избегать этого, если нет другого выбора. Craig Johnstone 10 лет назад 0
Это вопрос для stackoverflow.com, и у вас есть аккаунт там. Sacha K 10 лет назад 2
@CraigJohnstone: У вас была возможность проверить код из моего ответа? Я почти уверен, что это единственный способ сделать то, что вы просите. Плавающие элементы не обрабатываются правильно в IE 6/7, поэтому эти обходные пути необходимы. Также мое решение имеет преимущество в том, что все браузеры, кроме IE6 и IE7, будут игнорировать обходной путь. James P 10 лет назад 0
@SachaK, спасибо - я полностью согласен. Я не уверен, как это закончилось на суперпользователе. До сих пор я не слышал о суперпользователе и думал, что * публикую * сообщения на stackoverflow, пока не заметил ваш комментарий и не проверил URL. Craig Johnstone 10 лет назад 0

1 ответ на вопрос

0
James P

What you are trying to do is a bad idea as firstly no one should be making this much effort to support IE6 in a new web application and secondly your HTML structure is not flexible and will only work in very specific scenario.

However, I was curious to see if the classic IE6 float bugs could be overcome purely with CSS and no extra HTML and surprisingly it does seem possible. The trick is to use IE's CSS expressions to inject <br> elements in to the page after the text boxes.

The following code worked for me in IETester when emulating IE6 and IE7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #section label input{ float: left; margin-bottom: 10px; *zoom: expression(this.runtimeStyle.zoom="1", this.parentNode.insertBefore(document.createElement("br"), this.nextSibling).style.cssText="clear:both;font:0/0 serif"); } </style> </head> <body> <div id="section"> <h2>Section Title</h2> <label for="name">Name</label> <input type="text" id="name" /> <label for="dob">Date of Birth</label> <input type="text" id="dob" /> <label for="email">Email</label> <input type="text" id="email" /> </div> </body> </html>

Based on information from this page

Спасибо - это решение работало нормально. Это не совсем решает проблему достижения этого без добавления дополнительной разметки (поскольку CSS добавляет BR), но я не могу найти какой-либо другой способ сделать это - так что я думаю, что это единственное решение. Приветствия. Craig Johnstone 10 лет назад 0

Похожие вопросы