Я использую JavaScript для автоматического создания сносок из текстовой страницы HTML. Код JS основан на этом примере: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Auto-Footnoter (описание на немецком языке). Сценарий в основном собирает все элементы в тексте, помеченные <span class="fn">, создает элемент div для пояснений сноски внизу страницы и добавляет обратную ссылку на привязку сноски в тексте. Результат этого сопоставим с системой сносок Википедии. JS-скрипт в основном работает нормально, после того как я настроил его под свои нужды.
В верхней части моей страницы я использую фиксированный заголовок. Чтобы сделать ссылку привязки видимой, я добавил класс fnheader в тег a, созданный сценарием JS со следующим CSS:
a.fnheader {
position:relative;
margin-top:-150px;
padding-top:150px;
visibility:none;
}
Обычно я бы предпочел, чтобы представленное решение было услышано https://stackoverflow.com/a/13184714/10321738,, но display: block; не будет работать для сносок (все они расположены в левой части страницы, но больше не в тексте), вышеупомянутый CSS делает.
Таким образом, заголовок больше не скрывает ссылки привязки. Но проблема сейчас заключается в заполнении на 150 пикселей, которое добавляется CSS. Когда я попадаю в подобную ситуацию в тексте
bla blah blah bla bla blah bla blah blah
bla bla bla blah [1] bla blah bla blah
bla bla bla bla [2] blah bla blah bla
где 1 и [2] представляют сноски, щелкнув по 1 , я получаю описание сноски [2], поскольку верхний отступ ссылки [2] продлен до строки сноски 1 . Ссылка для сноски 1 активируется только при указании на соответствующую позицию в строке над сноской 1 . Я думаю, что проблема ясна ...
Есть ли способ уменьшить кликабельную область для ссылки на сноску (желательно с помощью CSS)? Или у кого-нибудь есть идея, чтобы решить проблему с фиксированным заголовком?
Спасибо за любые советы по этому вопросу заранее!
Редактировать: Некоторая дополнительная информация, чтобы прояснить проблему: Стиль fnheader применяется к сноскам в тексте сценарием JS. Он добавляет верхнюю часть отступа 150 пикселей к ссылке, чтобы переместить ее вниз по фиксированному заголовку вверху страницы. Это приводит к тому, что при нажатии на 1 вы получаете описание сноски [2], поскольку заполнение также расширяет область ссылки сноски, которую можно щелкнуть, до предыдущей строки.
К сожалению, я не могу предоставить здесь никакого кода.
Редактировать 2: Я только что применил сплошную границу 1 px к сноскам в тексте, чтобы получить визуальное представление о том, что происходит не так. Вот как это выглядит:
Как вы можете видеть, верхний отступ расширяется до верхнего (как и ожидалось), чтобы обойти фиксированный заголовок вверху страницы. Это приводит к расширению интерактивной области до предыдущих строк, а также к другим сноскам в тексте (как показано на скриншоте).