Интернет Эксплорер 6 и 7:Плавающие элементы расширяются до 100% ширины, если они содержат дочерний элемент, плавающий вправо.Есть ли обходной путь?
https://stackoverflow.com/questions/852104
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
у меня есть родитель div уплыл влево, с двумя детьми divМне нужно плыть правильно.
Родитель div должно (если я правильно понимаю спецификацию) быть настолько широким, насколько необходимо, чтобы вместить дочерний элемент divs, и именно так он ведет себя в Firefox et al.
В IE родительский div расширяется до 100% ширины.Кажется, это проблема с плавающими элементами, у которых дочерние элементы плавают правильно.Тестовая страница:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0;float:left;">
<div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
<div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>
</html>
К сожалению, я не могу исправить ширину ребенка divs, поэтому я не могу установить фиксированную ширину для родителя.
Есть ли обходной путь только с помощью CSS, чтобы сделать родительский div широкий, как ребенок divс?
Решение
Вот решение, которое делает inline-block работать на IE6, как на http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ чтобы элементы вели себя как плавающие вправо <div>s:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
Другие советы
Я придумал решение, используя text-align: right и display: inline.
Попробуй это:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="margin-top: 10px; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
<div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
</div>
</div>
Обратите внимание, что мне пришлось изменить порядок полей «Тестер» в разметке, чтобы они отображались так же, как в вашем примере.Я думаю, что в новом контейнере есть альтернатива с маржой-топом, но сейчас у меня нет времени на ее изучение.
Если вам нужен более чистый стиль для всех других браузеров, попробуйте следующее:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="float: right;">
<div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
<div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
</div>
</div>
Есть несколько различных проблем, которые могут возникнуть, когда вы хотите расположить элементы вокруг этих блоков.Однако я думаю, что эти проблемы решить будет гораздо проще, чем эту.
Надеюсь, это было полезно для вас.
Мне не удалось найти решение, использующее только CSS, которое соответствовало бы вашим требованиям, но если вы хотите использовать решение на JavaScript, возможно, следующий код поможет?Я не менял стиль элементов управления, я только добавил идентификаторы. main, sub1, и sub2 к вашим div.
var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
У меня была та же проблема, и я решил ее, разместив дочерний элемент (который я хотел сместить вправо) с положением: абсолютное и правильное: 0.Я дал родительскому элементу достаточно правого заполнения, чтобы освободить место для дочернего элемента...Стоит попробовать, может работать не для всех приложений!
А как насчет использования таблицы из одной ячейки вместо внешнего элемента div?Возможно, потребуется дополнительная работа, чтобы все было правильно выровнено, но таблица не расширяется.
Вы могли бы начать с этого:
<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>
Результат этого, по крайней мере, соответствует тому, что вы ищете.Очевидно, вы захотите настроить его под свои нужды и, возможно, добавить некоторую логику CSS, чтобы применять ее только к браузеру < IE 7.
Если это не совсем то, что вам нужно, попробуйте играть с отрицательной маржой.
Во-первых, почему вы не используете встроенные стили?
Я бы использовал это для IE с помощью отдельного файла CSS:
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
Я знаю, что это не прямой вопрос, но с IE ВСЕГДА приходится иметь дело!Большинство дизайнеров/разработчиков, которых я знаю, создадут совершенно новую таблицу стилей для IE.
Очень хакерское решение, использующее только CSS, которое хорошо работает в IE, Chrome и FF.
Я воспользовался решением Кабы, но проблема была в том, что в IE он работает нормально, но все остальные браузеры показывают пространство в 4 пикселя между двумя дочерними элементами div.Пространство остается равным 4 пикселям, даже если содержимое обоих элементов div расширяется.Чтобы это исправить, я использовал условные операторы IE.Я не похож на лучший код в мире, но он выполняет свою работу.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0; float: left;">
<div style="border-top:solid 10px #00c; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>
<div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">
<!--[if gte IE 5]>
<div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
<![endif]-->
Tester1
<!--[if gte IE 5]>
</div>
<![endif]-->
</div>
</div>
</div>
</body>
</html>
