Css вопрос с картографированием Elemnts

Question

На моем сайте я сопоставляю элементы по ID. он отлично работает для всех букв алфавита. За исключением А, но когда я нажимаю на алфавит А, он не подходит к элементам, пожалуйста, помогите мне выйти из этого. http://dotmappersdesign.com/mclarenpress/glossary/

Answer 1

Это действительно работает. Для А, как и для остальных. Это просто, что есть несколько объяснений для других букв, поэтому эффект не так очевиден. См. Например, B. Первое слово для B - «Связывание», но первое объяснение, которое вы видите после нажатия буквы, относится к «Binding Margin».

Причина в том, что ссылка приносит якорь в верхней части экрана и не учитывает фиксированный заголовок, поэтому он скрывается ниже этого.

Возможное решение только для CSS было бы комбинацией отступов и отрицательного поля, чтобы переместить верхнюю границу элементов, которая будет выравниваться по верхней части экрана, чтобы компенсировать высоту заголовка. Вот пример, который работает на вашем сайте, но вы должны сделать селектор более конкретным (#glossary p strong или использовать семантически корректный description list).

p strong { 
    display: inline-block; /* Required for the margin/padding to have an effect */ 
    margin-top: -60px; 
    padding: 60px 0 0; 
}