Internet Explorer 6 и 7: пущенные в ход элементы расширяются до 100% шириной, когда они содержат дочерний элемент пущенное в ход право. Существует ли обходное решение?
Я наконец-то понял, мне просто нужно было установить node.js из интернета.
7 ответов
Вот решение, которое заставляет встроенный блок работать в IE6, как на http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling / , чтобы элементы вели себя больше как <!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>
Я не смог придумать решение только для CSS, соответствующее вашим требованиям, но если вы хотите использовать решение JavaScript, может быть, следующий код может помочь? Я не менял стиль разделов, я только добавил идентификаторы main , sub1 и sub2 в ваши div.
var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
Я придумал решение, используя 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>
Обратите внимание I. пришлось изменить порядок полей «тестера» в разметке, чтобы они отображались так же, как в вашем примере. Я думаю, что есть альтернатива, например, margin-top в новом контейнере, но сейчас у меня нет времени разбираться в ней.
Если вам нужен более чистый стиль для всех других браузеров, попробуйте следующее:
<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>
Есть несколько других проблем это может возникнуть, когда вы захотите расположить вещи вокруг этих ящиков. Однако я думаю, что эти проблемы будет намного проще решить, чем эту.
Надеюсь, это было полезно для вас.
Начать можно со следующего:
<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, чтобы применить ее только к браузеру Если это не совсем то, что вы ищете, попробуйте поиграть с некоторыми отрицательными полями.
Как насчет использования таблицы с одной ячейкой вместо внешнего div? Может потребоваться дополнительная работа, чтобы все правильно выровнять, но таблица не расширяется.
Во-первых, почему вы не используете встроенные стили?
Я бы использовал это, чтобы настроить таргетинг на IE с отдельным файлом css:
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
Я знаю, что это не прямой вопрос , но с IE ВСЕГДА сложно иметь дело! Большинство знакомых мне дизайнеров / разработчиков создадут совершенно новую таблицу стилей для IE.
Очень хакерское, но единственное решение CSS, которое нормально работает в IE, Chrome и FF.
Я воспользовался решением kaba, но проблема была в том, что в IE оно работает нормально, но во всех других браузерах между двумя дочерними блоками div отображается расстояние 4 пикселя. Пространство остается равным 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>