Следующие/Предыдущие кнопки Отображаются в Firefox, а не в Chrome?

У меня есть маленький div, содержащий следующую/предыдущую кнопку и страницу # из #. Проблема в том, что она отображается только в Firefox, а не в Chrome. Он использует код кнопки Foundation 4 и код paginator Jekyll для создания настройки.Следующие/Предыдущие кнопки Отображаются в Firefox, а не в Chrome?

Вы можете увидеть это в нижней правой части страницы, чуть выше нижнего колонтитула на tx0rx0.com Хром на моем ноутбуке ничего не показывает, но код есть в средстве просмотра страниц. Что дает?

источник

2013-09-02 cii

вопрос, в моей копии Chrome, по крайней мере, в том, что кнопки скрыты за нижним колонтитулом. Я только что изменил поле «margin-bottom» раздела # на -4em, и кнопки снова появились. – dwarduk

Если это только хром, вы можете создать скрипт, который изменяет стили, если пользователь использует хром. – Speedysnail6

Кажется любопытным, чтобы настроить хром только скрипт. Интересно, почему это так. Вероятно, это связано либо с тем, как вычисляются ems, либо с моим липким решением для нижнего колонтитула. – cii

Контейнер .pagination div имеет плавающие элементы, но не очищается.

Поскольку контейнер является последним элементом внутри #wrap, это зависит от этого класса, который отсекает плавали .pagination:

#wrap > *:last-child { 
    padding-bottom: 6.25em; 
}

Вы можете это исправить, изменив отступ снизу-маржинального дно , или применить clear-fix к div, содержащему элемент float .pagination.

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
}

источник

2013-09-03 00:20:11 Dan

Я закончил с вашим первым предложением. Кажется, она решила проблему. Если вы могли бы объяснить немного больше о всплывших нечистых элементах и о том, что делает #wrap> *: последний ребенок, это было бы замечательно – cii

#wrap> *: last-child выбирает только последний элемент внутри div #wrap, который бывает div, содержащий разбиение на страницы. (* выбирает любой элемент) С поплавками контейнер не будет обертывать перемещаемый элемент, если он не будет также плавающим или не очищенным, это странная причуда в CSS. Вы можете прочитать об этом здесь http://www.quirksmode.org/css/clearing.html – Dan

Как применить решение clearfix? – cii

Вы это происходит:

#wrap { 
    margin: 0 auto -6.25em; 
}

И нижний край этого контейнера установлен в -6.25em. У вас также есть это происходит:

#wrap > *:last-child { 
    padding-bottom: 6.25em; 
}

Какой эффективно выбрать последний ребенок div из #wrap иметь padding-bottom из 6.25em. Намерение здесь состоит в том, что эти двое отменяют друг друга; это не то, что происходит, потому что стили применяются к различным элементам блока, которые находятся в нормальном потоке документа. Таким образом, ваш пейджер скрыт из-за отрицательной границы.

Я не уверен, что вы намерены здесь. Легко исправить, если нет какой-то причине это не может быть сделано, это:

#wrap { 
    margin: 0 auto; 
}

И уничтожить это:

#wrap > *:last-child { 
    padding-bottom: 6.25em; 
}

источник

2013-09-03 00:25:58 stuajc

Мне повезло, что это хороший способ заставить нижний колонтитул всегда существовать в нижней части страницы. Я признаю, что не совсем понимаю, как это делается. – cii

Следующие/Предыдущие кнопки Отображаются в Firefox, а не в Chrome?

ответ

Смежные вопросы