загрузочные сетки в Internet Explorer 7

Борьба с IE7, неправильно оборачивающим столбцы в моем макете Bootstrap 3 с тремя столбцами.

Моя сеточная система работает так, как мне хотелось бы (складывается в разрешении, которое отражает меньшее устройство) в любом другом браузере, включая IE8. Я хотел бы выяснить, какую поддержку я теряю от IE8 до IE7, из-за чего он не переносится должным образом в IE7, который отображает любой столбец, часть содержимого которого находится в позиции 9+ столбца в новой строке. .

< col-md-3 >< col-md-3 >< col-md-3 >

отображается как:

< col-md-3 >< col-md-3 ><br />
< col-md-3 >

Решение

Boostrap 3 использует padding-left/padding-right для каждого из элементов столбца, а также использует ‹ style = "width:100%;"> для достижения согласованной структуры.

IE7 не отображает это отступное пространство должным образом и вместо этого отображает его так, как другие браузеры отступали бы от пробела. т. е. если родительский контейнер имеет ширину 960 пикселей, ширина дочерних элементов ПЛЮС добавленные поля должны быть меньше 960. По сути (960/3)!=((320+поля)*3).

Чтобы решить эту проблему, я обернул каждый столбец в контейнер фиксированной ширины.


css twitter-bootstrap-3 grid-system internet-explorer-7
person stevothebeavo    schedule 19.06.2014    source источник
comment
Вам будет очень трудно найти поддержку IE7, большинство сайтов больше не поддерживают этот очень старый браузер. Почему вы должны его поддерживать?   -  person oliakaoil    schedule 20.06.2014
comment
клиент сайта верит в технологию, которая будет работать долго, поэтому ему нравится устаревшая поддержка   -  person stevothebeavo    schedule 20.06.2014
comment
время, чтобы получить новый cusotmer   -  person Dan    schedule 20.06.2014
comment
Microsoft даже не поддерживает IE7. Последним, который они будут поддерживать, является IE9. Вы можете иметь таблицу стилей для загрузки IE7, которая будет скрывать разрывы строк. Не лучший метод, но в любом случае это не лучший браузер для использования. Кроме того, theie7countdown.com — его использует менее 1% населения мира... Возможно, ваш клиент не понял что люди, использующие IE7, все еще, вероятно, находятся в отдаленной части мира, где никогда не будут пользоваться их услугами/продуктами, а если и будут, то они привыкли ко всему в Интернете, выглядящему как дерьмо.   -  person Aibrean    schedule 20.06.2014

Ответы (2)


arrow_upward
0
arrow_downward

Как упоминает Эйбреан, лучшим решением, вероятно, будет создание отдельной таблицы стилей только для IE7. Попробуйте использовать условные комментарии:

http://www.quirksmode.org/css/condcom.html

<!--[if IE 7]>
 <link rel='stylesheet' type='text/css' href='/path/to/ie7styles.css' />
<![endif]-->
person oliakaoil    schedule 20.06.2014
comment
Это хорошее решение, если бы мне пришлось изменить несколько аспектов CSS, или если бы CSS, поставляемый с twitter-bootstrap-3, был не таким длинным, как документ для редактирования ТОЛЬКО для того, чтобы успокоить менее 1% населения ( как указали Эйбреан и Дэн). Хотя спасибо за наводку - person stevothebeavo; 20.06.2014

arrow_upward
0
arrow_downward

IE8 и более ранние версии не поддерживают некоторые селекторы, используемые в таблице стилей Bootstrap. Одним из наиболее ярких примеров этого является псевдоселектор nth-child, который широко используется в Bootstrap и не поддерживается в IE8 и более ранних версиях.

Следующее не имеет прямого отношения к вашей проблеме, но, возможно, вы имеете отношение к этому:

Недавно у меня возникла проблема, когда я создал серию li.span4 в цикле jQuery. В Bootstrap существует правило удаления левого поля из 4-го элемента, но это правило определено как nth-child(4), поэтому не относится к IE8-

Чтобы решить эту проблему, я просто нашел правило, которое IE8 не распознавал, и дополнил его другим правилом, определяющим то же самое без псевдоселектора, так что где

[class*="span"]:nth-child(4)

существовало, я дополнил:

.row-fluid > .span4:first-child + .span4 + .span4 + .span4

чтобы добиться того же. Первый ребенок поддерживается в IE8, не уверен насчет IE7.

person davidcondrey    schedule 08.08.2014