Якорные теги не работают в IE или FF

0

Мои теги привязки работают неправильно в IE или FF. Прекрасно работает в Chrome. Помогите?! Здесь JSFiddle, который показывает, что я пытаюсь выполнить, и вижу PasteBin для необработанного HTML.

Я не знал, как импортировать JQuery в JSFiddle, так что почему есть ссылка PasteBin.

В принципе, у меня есть сетка людей, которые, всякий раз, когда зависают, отображает информацию о сотруднике. Якорными тегами являются буквы алфавита в верхней части страницы. При щелчке они должны перейти к первому имени, которое начинается с этой буквы в сетке. Это отлично работает в Chrome, но не перемещается, а вплоть до первой строки как в Firefox, так и в IE.

Этот код используется внутри пользовательского портала Spiceworks, поэтому почему HTML-теги отсутствуют.

Я вообще понятия не имею, почему это происходит, и мне интересно, может ли кто-то передать мне некоторые знания.

Заранее спасибо!

<!--See links in description above.-->
  • 0
    На левой боковой панели JSFiddle под названием Frameworks & Extensions есть раскрывающееся меню, которое позволяет использовать любую из нескольких версий JQuery. По умолчанию установлено значение « No library (pure JS) .
  • 0
    Спасибо за внимание, @Two-BitAlchemist. Two-BitAlchemist. Полагаю, я мог бы покопаться и сам это выяснить. Увы, я здесь ленивый. Ешьте доритос.
Теги:
internet-explorer
firefox
anchor

4 ответа

1
Лучший ответ

Я просто конкретизировал с самими элементами изображения (которые уже установили ID) и не использовал отдельные теги. Будет немного поддерживать, но, по крайней мере, это выглядит правильно. Непрерывные пробелы в тегах привязки создавали некоторые проблемы выравнивания на моей странице. Здесь обновленный JSFiddle показывает, с чем я закончил.

Спасибо за ваши предложения, все.

Вместо этого в сетке фотографий:

<a id="Aanchor">&nbsp;</a>

Я пошел с этим в альфа-теги вверху:

<a href="#AdamC">A</a>

(который связан с самими изображениями ниже, а не с отдельным тегом)

Поделиться
  • 1
    Я думаю, что это удивительно разумное использование того, что вы уже имели. Знаете ли вы, что можете принять свой собственный ответ?
3

Попробуйте сделать якорь следующим образом:

<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>

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

вы также можете просмотреть демо

Поделиться
  • 1
    Смотрите мой пост ниже для маршрута, который я выбрал. У вас недостаточно высокого представителя, чтобы дать вам +1 @ user2515563, но этот jquery скролл довольно приятный. Легко реализовать!
  • 2
    Я поделюсь им с тобой +1, так как он прошел лишнюю милю и показал тебе, как делать то, что делают все классные дети, когда сталкиваются с этим. :П
1

Ваши якорные метки пусты, поэтому некоторые браузеры игнорируют их.

Где у вас есть:

<a name="Aanchor"></a>

Вместо этого вы должны попробовать:

<a id="Aanchor">&nbsp;</a>

Кроме того, новый способ сделать это - использовать идентификаторы, а не именовать якоря, как есть.

Посмотрите эту обновленную скрипту, где я изменил #Canchor. Это работает для меня в Firefox.

Поделиться
0

В некоторых браузерах вам нужно иметь текст в теге привязки, чтобы он работал правильно. Если вы не хотите что-либо в имени якоря, вы можете просто использовать неразрывное пространство: &nbsp;

Итак, это:

<a name="Aanchor"></a>

Становится следующим:

<a name="Aanchor">&nbsp;</a>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню