Помогите с пробелами: сейчас и нормально в IE - PullRequest
Новая
       1

Помогите с пробелами: сейчас и нормально в IE

3 голосов
/ 20 марта 2011

Я не могу понять это ...

У меня есть div с именем '#ContentContainer', его ширина составляет 100%, и ему требуется пробел из nowrap, поэтому его внутренности расширяются, а коллапс выходит за пределы окна и создает горизонтальную прокрутку. В рамках расширяющихся и разрушающихся div'ов у меня есть текст и изображения. В IE эти внутренние div имеют пробел: к ним применен nowrap ... Я установил пробел в нормальное состояние, но IE не распознает это ... кто-нибудь может помочь?

Здесь CSS: 

#ContentContainer {
    position: relative;
    height: 480px;
    width: 100%;
    margin: 10px 0px 0px 0px;
    border: 1px solid blue;
    white-space: nowrap;
}

.column {
    position: relative;
    white-space: normal;
    width: 220px;
    top: 0px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    height: 420px;
    margin: 20px 30px 0px 0px;
    *display: inline;
    vertical-align: top;
}

и мой HTML: 

<div id="#ContentContainer">
    <div class="column">
        Text that needs to have a white-space or normal.  It needs to wrap.  Text that needs to have a white-space or normal.  It needs to wrap.  Text that needs to have a white-space or normal.  It needs to wrap.  
    </div>

    <div class="column">
        Text that needs to have a white-space or normal.  It needs to wrap.  Text that needs to have a white-space or normal.  It needs to wrap.  Text that needs to have a white-space or normal.  It needs to wrap.  
    </div>

    <div class="column">
        Text that needs to have a white-space or normal.  It needs to wrap.  Text that needs to have a white-space or normal.  It needs to wrap.  Text that needs to have a white-space or normal.  It needs to wrap.  
    </div>

</div>

Кто-нибудь?

Ответы [ 2 ]

3 голосов
/ 03 июля 2011

Свойство white-space:nowrap поддерживается во всех версиях IE, поэтому оно должно работать на вас.

Ваша проблема не в CSS, а в HTML-коде: у вас <div id="#ContentContainer">, но это неверно: идентификатор в HTML-коде не должен содержать хеш-символ (#).В коде CSS требуется ссылка на идентификатор, но сам идентификатор не должен его содержать.

Таким образом, ваш CSS верен: 

#ContentContainer {
   ....
}

но ваш HTML должен выглядеть так: 

<div id="ContentContainer">
    ....

надеюсь, что это поможет.

1 голос
/ 07 июля 2013

Mystery наконец-то была решена спустя почти три недели: казалось, что синтаксический анализ white-space:normal; правильно, но не действительно делает что-то с ней (фактически, делая пробел: nowrap; бессмертный)ошибка в IE 5.5.Более поздние версии IE, которые попадают в своего рода «режим совместимости» или «режим причуд», могут повторять это неправильное поведение.На его внешний вид влияет как точная версия IE, так и содержимое DOCTYPE - и даже интранет или интернет (что объясняет, почему он вообще не отображается для многих людей, и почему так много ответов, кажется, неимеет смысл).

верный способ избавиться от этого неправильного поведения - заставить все версии IE использовать более новую модель рендеринга (в приведенных ниже примерах используется «последняя модель рендеринга»что каждая версия способна "), что требует отправки им HTTP-заголовка X-UA-Compatible либо с веб-сервера, если это возможно, либо внутри каждого соответствующего документа в качестве запасного варианта.Для сервера Apache команда для добавления в .htaccess выглядит примерно так: 

Header set X-UA-Compatible "IE=edge,chrome=1"

Для PHP это должно быть просто добавление пары строк кода, а для IIS это просто добавление конфигурации.(Вы также можете поэкспериментировать с оптимизацией отправки этого заголовка только с файлами HTML и / или отправки его только в браузеры IE.)

Если вы не можете изменить поведение сервера, отступление заключается в добавлении в каждого соответствующего файла до все Javascript или CSS что-то похожее на 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
...