Как обращаться с nth-child для Internet Explorer 8

У меня есть php-скрипт, который вызывает серию изображений, которые отображаются так:

Это код PHP, который их вызывает:

<?php

$query = "SELECT
parent_business_id,
image_url,
alt_tag,
description,
thumb_url,
business
FROM
images
ORDER BY
RAND()
LIMIT
6
";

$result = mysql_query($query, $dbc)
or die (mysql_error($dbc));

while($row = mysql_fetch_array($result)) {

$parent = $row["parent_business_id"];
$image = $row["image_url"];
$alt = $row["alt_tag"];
$description = $row["description"];
$thumb = $row["thumb_url"];
$business = $row["business"];

$mainthumb = "./images/270x270/$image.jpg";

echo

"<div class='gallery_image_container'>

$alt

</div>";

}

?>

At the moment I am using css3's nth-child to add margins to the central images:

div.gallery_image_container:nth-child(3n+2){
margin-left:10px;
margin-right:10px;
}

The problem I have is this works great in browsers that support css3 but ie 7 and ie 8 will not and I need a solution. I am thinking that maybe I can do this by adding classes in php. If so which function would I use. Is there an nth-child like selector in php?

0
nl ja de
PHP действительно не имеет селектора nth-child, но вы можете сделать это самостоятельно, когда вы зацикливаете, чтобы распечатать их, если это второй элемент, 5-й элемент и т. Д., Просто добавьте класс.
добавлено автор Andy, источник
но стоит упомянуть: ORDER BY RAND() - чрезвычайно медленный способ выполнения запроса. Он в основном должен загружать всю таблицу. Это прекрасно для небольших таблиц, но если у вас много данных, ORDER BY RAND() даст вам очень плохие проблемы с производительностью.
добавлено автор SDC, источник
также не относится к теме, но определенно стоит упомянуть: функции mysql_xxx() на PHP устарели. Это означает, что PHP отказывается от поддержки для них и может полностью удалить их из языка в будущих версиях. В любом случае, независимо от того, они считались устаревшими и небезопасными в течение длительного времени. Рекомендуется strong переключиться на использование одного из лучших API-интерфейсов mysql, предоставляемых PHP, либо mysqli , либо PDO .
добавлено автор SDC, источник
@RichardBell - re ORDER BY RAND() : если это небольшая таблица, и если вы уверены, что она останется маленькой, то придерживайтесь того, что у вас есть. Если это будет больше, или если у вас есть другие таблицы, которые вы хотите заказать случайным образом, это будет большой, есть другие методы, которые работают лучше. Есть несколько вариантов, и я знаю, что на этом сайте есть ответы, которые подробно описывают их, поэтому немного поработайте, если вам нужно.
добавлено автор SDC, источник
@RichardBell - устаревшие функции. В руководстве по PHP содержится подробная информация. Из других опций mysqli довольно похож на MySQL ; как правило, не слишком много хлопот для переключения. PDO более мощный, но синтаксис совершенно другой, поэтому может потребоваться немного больше усилий, но он стоит того, в конечном счете.
добавлено автор SDC, источник
@SDC Стол относительно небольшой, поэтому я не слишком беспокоюсь о проблемах с производительностью. Однако, если есть лучший способ, я открыт для предложений. Спасибо за ваш комментарий.
добавлено автор Richard Bell, источник
@SDC Реферируемые функции - проблема. Мне нужно будет изучить это. Я почти новичок, когда речь заходит о MySQL и php. Будет ли это болезненный переход?
добавлено автор Richard Bell, источник

3 ответы

Как упоминал Энди в комментариях, вы можете узнать, с какими элементами вы должны добавить класс с PHP. Все, что вам нужно - это модульное подразделение.

Чистое CSS-решение требует улучшения вашего HTML. Это, очевидно, список изображений, поэтому: Используйте список. Полученный HTML-код должен выглядеть примерно так:


Теперь в CSS удалите правило nth-child и вместо этого добавьте следующие два правила:

.gallery_container {
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}
.gallery_container > li {
    margin: 0 0 0 20px;
    padding: 0;
    float: left;
}
1
добавлено
Отличное решение. Большое спасибо. Вы были правы с 10px, прежде чем отредактировать свой ответ.
добавлено автор Richard Bell, источник

Можешь попробовать

$(identifier:nth-child(3n+2)').addClass('styleClassName');

использование jQuery

1
добавлено
Я не думаю, что размещение Javascript-решения здесь поможет. Особенно, если это зависит от структуры. Это можно (и должно) делать с помощью CSS или, если нет другого способа, с PHP.
добавлено автор dave, источник

Если вы хотите использовать селекторы CSS, такие как nth-child , которые не поддерживаются в IE8, я хотел бы использовать Selectivizr .

Selectivizr - это библиотека Javascript, которая возвращает целый ряд селекторов CSS в старые версии IE, так что ваш стандартный CSS-код может работать без изменений во всех браузерах.

Другой альтернативой является старый сценарий под названием ie7.js (и его позднее версии ie8.js и ie9.js), что также делает то же самое, плюс исправление нагрузки других ошибок и причуд в IE. Но мое предпочтение было бы в отношении Selectivizr, поскольку оно намного больше нацелено (то есть оно не делает столько, сколько ie7.js), и его гораздо более новый код, оба из которых должны означать, что он работает лучше.

0
добавлено
phpGeeks
phpGeeks
3 620 участник(ов)

Best PHP chat Еще: @dbGeeks - базы данных @phpGeeksJunior - новичкам @moscowProgers - IT Москва @ebanoePhp - весёлый канал о PHP @laravel_pro - Laravel @jobGeeks - вакансии @jsChat - JS Правила: https://t.me/phpGeeks/764859 ДР - 28.03.2016

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

PHP
PHP
1 309 участник(ов)

Группа про современный PHP. Обсуждаем ООП, TDD, BDD, DDD, SOLID, GRASP и прочие крутые базворды Для ознакомления: https://gist.github.com/mkusher/711bd46f0b62fbae851182e6fb3b1839 Группа PHP для новичков @phpGeeksJunior Вакансии: https://t.me/fordev

PHP — вакансии, поиск работы и аналитика
PHP — вакансии, поиск работы и аналитика
1 251 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению PHP, Laravel, Symfony, Yii и т.д. Здесь всё: full-time, part-time, remote и разовые подработки. См. также: @qa_jobs, @devops_jobs, @javascript_jobs, @nodejs_jobs, @uiux_jobs, @products_jobs

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

phpGeeksJunior
phpGeeksJunior
980 участник(ов)

Группа для новичков. Не стесняйтесь задавать вопросы по php. Не флудить!!!! Правила и полезные ссылки https://gist.github.com/exileed/a53dd0617b35a705ff44b38c8028e6a5 Бест от пхпгикс https://t.me/best_of_phpgeeks

phpclub.ru
phpclub.ru
872 участник(ов)

Официальный чат phpclub.ru - остерегайтесь подделок #rules Правила группы - уважайте друг друга. Скриншоты -> ссылками. Код -> pastebin.com. Вакансии строго -> https://goo.gl/4bNxym, в чат ссылку. За рекламу и мат - БАН!

Devall | PHP
Devall | PHP
272 участник(ов)

Пристанище для восходящих звёзд разработки, которые перейдут на более адекватные языки. http://combot.org/chat/-1001014863761 Инвайт: j.mp/devallphp

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)