Ошибки верстки, едет верстка в IE9

@Sanu0074 · Регистрация: 14.06.2010

Студворк — интернет-сервис помощи студентам

Доброго времени суток!
Сверстал страницу, тут можно посмотреть: http://91.122.62.102
Первый и основной вопрос, почему верстка очень сильно едет в IE9? Что не так?
И второе, представьте что вы строгий препод в супер-крутом универе, и проверяете грамотность верстки, вас бесят самые мелкие ошибки CSS\HTML. Так вот, скажите какие ошибки и где я допустил при верстке, как их избежать, что на что заменить, и на сколько критичны найденные вами ошибки.
Я учусь, и буду признателен за качественную критику)

@Xteda · 30.03.2015, 14:36

Дивы - это, конечно, лучше чем таблицы, но хуже чем использование HTML5. Для даты есть тег time, для статей article. Дивы с классом .item, я бы, наверное, заменил на ul li (ведь это все-таки список), а для разделов существует тег section.
По поводу ie 9 - вот мой скрин , где что поехало?

@Sanu0074 · 30.03.2015, 15:17 **[ТС]**

Сообщение от Xteda

По поводу ie 9 - вот мой скрин , где что поехало?

странно, вот мой скрин ie9

@Xteda · 30.03.2015, 15:20

Какой режим документа стоит?

@Sanu0074 · 30.03.2015, 15:22 **[ТС]**

Xteda, тот что по умолчанию в IE 9, не менял ничего

@Xteda · 30.03.2015, 15:28

У меня начинает сыпаться только если стоит ie 7 и ниже. Потому что для него нужно применить магию. Inline-block отрабатывает не так, как ожидается. Для ie 7 нужны стили display:inline и *zoom: 1; вместо display:inline-block. Но это так, оффтоп. Нажми F12 и глянь какой режим браузера и режим документов, есть подозрение, что все-таки не ie 9.

@Sanu0074 · 30.03.2015, 15:30 **[ТС]**

Xteda, ты был прав) спасибо)

@Xteda · 30.03.2015, 15:34

Рекомендую использовать <meta http-equiv="X-UA-Compatible" content="IE=edge" /> в head, что бы всегда открывалось в самой старшей версии ie.

@Sanu0074 · 31.03.2015, 18:06 **[ТС]**

Xteda, по этой же странице, сейчас она так выглядит

а нужно чтоб, блок .inner вот так позиционировался

но почему то, он не хочет, хотя наружный .block имеет text-align:center, а .inner - left.
Как сделать это правильно и почему так не работает?

@Xteda · 31.03.2015, 18:45

Сейчас блок .inner по ширине никак не ограничен и, соответственно, text-align не отрабатывает, потому что блок .inner занимает всю ширину блока .block. Нужно задать хотя бы максимальную ширину для inner и все заработает:

CSS
1
2
3
.inner {
    max-width: 1325px;
}

@Sanu0074 · 31.03.2015, 18:54 **[ТС]**

Xteda,

max-width: 1325px;

max-width - не вариант, например если дисплей будет шире, то получим такое:

так же при дисплее меньше - будет неправильно отображаться, item-блоки выровняются по левому краю

@Xteda · 31.03.2015, 19:00

тогда сделать отступ слева. text-align не отработает без ширины

@Sanu0074 · 31.03.2015, 19:09 **[ТС]**

Xteda, но как его подобрать если дисплеи разных размеров? только javascript'om мерять?

Добавлено через 8 минут
Xteda, тут .inner имеет display: inline-block, a inline-block по умолчанию имеет ширину равную ширине контента, а тут он почему-то от края до края

@Xteda · 31.03.2015, 19:59

а у контента какая ширина? li не помещаются на одной строке (потому что .block ограничивает ) и падают на следующую. А так ширина всех li была бы больше чем у .block, поэтому и .inner занимает всю доступную ширину.

@Sanu0074 · 31.03.2015, 20:58 **[ТС]**

Сообщение от Xteda

а у контента какая ширина?

каждый .item = 160px + отступы, их кол-во на строке зависит от ширины дисплея

Добавлено через 22 минуты
есть такое решение без inner:

JavaScript
1
2
3
4
5
6
    htmlCalibrate: function(){
        var blockW = $('.block').width(), 
            item = $('.item'),
            itemW = item.width()+(parseInt(item.css('padding-left'))*2)+(parseInt(item.css("border-left-width"))*2);
        $('.block').css('padding-left',blockW%itemW);
    }

но мне это не нравится, хочется без JS

@Xteda · 31.03.2015, 21:00

а у контента какая ширина? - это был бы риторический вопрос

. Я просто хотел сказать, что ширина всех блоков .item больше чем у контейнера .block - поэтому и .inner занимает всю ширину своего родителя.

Добавлено через 1 минуту
Я по-своему опыту скажу, что делать такие расчеты с помощью js - зло злейшее. Если что-то можно сделать с помощью css, то это нужно сделать с css.

@Sanu0074 · 31.03.2015, 21:02 **[ТС]**

Сообщение от Xteda

Я по-своему опыту скажу, что делать такие расчеты с помощью js - зло злейшее.

я согласен)
но вот не могу найти подходящее решении из-за того что ширина блока нефиксированная

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Ошибки верстки, едет верстка в IE9

Решение

Решение

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5

	Ошибки верстки, едет верстка в IE9 30.03.2015, 14:09. Показов 2263. Ответов 16 Метки нет (Все метки) Доброго времени суток! Сверстал страницу, тут можно посмотреть: http://91.122.62.102 Первый и основной вопрос, почему верстка очень сильно едет в IE9? Что не так? И второе, представьте что вы строгий препод в супер-крутом универе, и проверяете грамотность верстки, вас бесят самые мелкие ошибки CSS\HTML. Так вот, скажите какие ошибки и где я допустил при верстке, как их избежать, что на что заменить, и на сколько критичны найденные вами ошибки. Я учусь, и буду признателен за качественную критику) 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	30.03.2015, 14:36
	Дивы - это, конечно, лучше чем таблицы, но хуже чем использование HTML5. Для даты есть тег time, для статей article. Дивы с классом .item, я бы, наверное, заменил на ul li (ведь это все-таки список), а для разделов существует тег section. По поводу ie 9 - вот мой скрин , где что поехало? 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	30.03.2015, 15:20
	Какой режим документа стоит? 0

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
	30.03.2015, 15:22 [ТС]
	Xteda, тот что по умолчанию в IE 9, не менял ничего 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	30.03.2015, 15:28
	Сообщение было отмечено Sanu0074 как решение Решение У меня начинает сыпаться только если стоит ie 7 и ниже. Потому что для него нужно применить магию. Inline-block отрабатывает не так, как ожидается. Для ie 7 нужны стили display:inline и *zoom: 1; вместо display:inline-block. Но это так, оффтоп. Нажми F12 и глянь какой режим браузера и режим документов, есть подозрение, что все-таки не ie 9. 0

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
	30.03.2015, 15:30 [ТС]
	Xteda, ты был прав) спасибо) 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	30.03.2015, 15:34
	Сообщение было отмечено Sanu0074 как решение Решение Рекомендую использовать <meta http-equiv="X-UA-Compatible" content="IE=edge" /> в head, что бы всегда открывалось в самой старшей версии ie. 0

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
	31.03.2015, 18:06 [ТС]
	Xteda, по этой же странице, сейчас она так выглядит а нужно чтоб, блок .inner вот так позиционировался но почему то, он не хочет, хотя наружный .block имеет text-align:center, а .inner - left. Как сделать это правильно и почему так не работает? 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	31.03.2015, 19:00
	тогда сделать отступ слева. text-align не отработает без ширины 0

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
	31.03.2015, 19:09 [ТС]
	Xteda, но как его подобрать если дисплеи разных размеров? только javascript'om мерять? Добавлено через 8 минут Xteda, тут .inner имеет display: inline-block, a inline-block по умолчанию имеет ширину равную ширине контента, а тут он почему-то от края до края 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	31.03.2015, 19:59
	а у контента какая ширина? li не помещаются на одной строке (потому что .block ограничивает ) и падают на следующую. А так ширина всех li была бы больше чем у .block, поэтому и .inner занимает всю доступную ширину. 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	31.03.2015, 21:00
	а у контента какая ширина? - это был бы риторический вопрос . Я просто хотел сказать, что ширина всех блоков .item больше чем у контейнера .block - поэтому и .inner занимает всю ширину своего родителя. Добавлено через 1 минуту Я по-своему опыту скажу, что делать такие расчеты с помощью js - зло злейшее. Если что-то можно сделать с помощью css, то это нужно сделать с css. 0