Принудительная блокировка элементов блока в IE (без родителя с фиксированной шириной) - PullRequest
Новая
       27

Принудительная блокировка элементов блока в IE (без родителя с фиксированной шириной)

0 голосов
/ 03 февраля 2012

Это довольно обсуждаемая проблема в Интернете, но после нескольких часов исследований, проб и ошибок я все еще не могу заставить приведенный ниже HTML-код вести себя так, как нужно в IE 7, 8 или 9: 

<html>
    <head>
        <title>Untitled Page</title>
        <style>
            .container {
                white-space: nowrap;
                overflow: auto;
                position: absolute;
            }
            .childContainer {
                float: left;
            }
            .box {
                float: left;
                border: 1px solid black;
                width: 20px;
                height: 20px;

            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="childContainer">
                <div class="box"></div><div class="box"></div><div class="box"></div>
                <!-- repeat until off screen -->
                <div class="box"></div><div class="box"></div><div class="box"></div>
            </div>
            <div class="childContainer">
                <span>This should not wrap!</span>
            </div>

        </div>
    </body>
</html>

Требуемое поведение выглядит следующим образом:

  • .box элементы не должны переноситься - полоса прокрутки должна отображаться в нижней части окна
  • .box элементы должны иметьфиксированная ширина и высота
  • .container и .childContainer не могут иметь фиксированную ширину.Число элементов .box произвольно
  • должен вести себя достаточно стабильно в IE7 + и последних версиях Chrome и FireFox

Предоставленный HTML работает в Chrome, я считаю, что этоspace: nowrap даже для блочных элементов.Я пытался использовать элементы SPAN, но они должны быть принудительными, чтобы быть блочным элементом с float: left или атрибут width игнорируется.Затем они имеют ту же проблему, что и элементы DIV.

Я уверен, что должно быть решение этой проблемы без использования JavaScript, но это вариант, если все остальное не удается.

Ответы [ 2 ]

2 голосов
/ 03 февраля 2012

http://jsfiddle.net/hjCWN/

Я не пробовал в IE, но вы можете попробовать удалить white-space: nowrap; и заменить на margin-right: -99999px;

1 голос
/ 03 февраля 2012

Положите коробки в стол. Это, кажется, единственный практический подход.

Когда вы пытаетесь заставить элементы .box появляться в строке, использование float: left имеет свой собственный эффект, который нельзя предотвратить установкой white-space, так как он работает на другом уровне, так сказать , Но, помещая их в строку таблицы, вы заставляете их в ряд.

Вы даже можете обойтись без этих элементов и просто стилизовать ячейки таблицы: 

<style>
table.boxes td {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  padding: 0;
}
</style>
...
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>
...