Ошибка Chrome или ошибка кодирования? Ссылки привязки/идентификатора на целевой странице не работают

ОТРЕДАКТИРОВАНО ДЛЯ ДОБАВЛЕНИЯ: Интересно - основываясь на комментариях людей ниже - я попытался настроить ссылку для перехода ВНУТРИ моей главной страницы - и это отлично работает. (http://www.umbc.edu/classof2012/index2.html - он находится в верхнем левом div в тексте абзаца) Итак, по какой-то причине проблема возникает в ссылке на отдельную целевую страницу. .

У меня есть страница, полная фотографий / подписей, и при нажатии на фотографию или текстовую ссылку зритель попадает на новую страницу с соответствующей биографией. Идея состоит в том, что они переходят непосредственно к биографии, связанной с фотографией, на которую они нажали. Это отлично работает в Safari и Firefox.

В Chrome все ссылки ведут к началу страницы с биографией, а не к соответствующей биографии на странице.

Что мне здесь не хватает? Это должно быть просто, верно?

Страницу можно посмотреть здесь: http://www.umbc.edu/classof2012/

Я пытался найти документацию о том, что это проблема Chrome, и не нашел ничего определенного. Я нашел несколько вопросов здесь, в SO, которые, кажется, затрагивают аналогичные проблемы, но ничего о простых, базовых ссылках привязки не работают. Возможно, я сделал что-то не так, что улавливает только Chrome, но код ссылки кажется довольно простым и всегда работал для меня в прошлом, если только я не пропустил какую-то очевидную ошибку!

Если это идиосинкразия Chrome, может ли кто-нибудь предложить альтернативное решение, которое будет работать во всех браузерах?

Спасибо!!

EDITED добавлены фрагменты кода...

Вот исходный код страницы ... он продолжается дальше того, что я опубликовал, но это больше похоже на то же самое:

code here: <!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>UMBC Class of 2012</title>
  <meta name="description" content="UMBC's Class of 2012 Featured Graduates">
    <link rel="shortcut icon" href="../images_new/icon.jpg" />
<meta name="viewport" content="width=device-width,initial-scale=1">



  <!-- CSS Reset -->
  <link rel="stylesheet" href="css/reset.css">

  <!-- Styling for your grid blocks -->
 <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div id="container">
  <div id="logo_holder">
  <div id="logo">
  <?php include("../include/toputilities_classof.shtml"); ?>
</div>
  </div>
  <div id="text_holder">

<div class="header">
  <img src="images/class_text3.gif" height="70" alt="Class of 2012" border="0"> 
  </div>

    </div>

    <div id="main" role="main">

       <ul id="tiles">

    <li style="background-color:#Fc0;padding:14px;">
    <a href="bios.html"><img src="images/commencement_7.jpg" width="200"></a>
      <p style="color:#333;font-size:13px;font-weight:bold;font-style:italic;padding:0 0px 9px 0px;">UMBC is proud of all of our graduates. On May 18 and 21, the University awards nearly 1,700 bachelor’s, master’s and Ph.D. degrees at its Graduate School and Undergraduate Commencement ceremonies. Meet a few of our exceptional students and discover what the future has in store for the Class of 2012.</p>
<!-- Share Button BEGIN -->
<a rel="nofollow" href="http://www.facebook.com/share.php?u=http://www.umbc.edu/classof2012/" target="_blank" style="text-decoration:none;float:left;margin-right:4px;" title="Share on Facebook" alt="Share on Facebook"><img src="images/facebook.png"/></a>
<a rel="nofollow" href="https://twitter.com/share" class="twitter-share-button" target="_blank" data-count="none" style="text-decoration:none;margin-right:4px;float:left;"title="Share on Twitter" alt="Share on Twitter"><img src="images/twitter.png"/></a>
<a rel="nofollow" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http://www.umbc.edu/classof2012" target="_blank" style="text-decoration:none;margin-right:4px;float:left;" title="Plus One" alt="Plus One"><img src="images/googleplus.png"/></a>

<a href="http://pinterest.com/pin/create/button/?url=http://www.umbc.edu/classof2012&media=http://www.umbc.edu/classof2012/images/commencement_7.jpg&description=UMBC's Class of 2012" target="_blank" style="text-decoration:none;"><img border="0" src="images/pinterest.png" title="Pin It" alt="Pin It"/></a>
<!-- Share Button END -->
    </li>
<li style="background-color:#FFC;">
          <p style="padding-bottom:7px;text-align:center;color:#000;margin-top:0;">    <strong>VALEDICTORIAN</strong></p>
          <a href="bios.html#MCole"><img src="images/student_pics/MaryCole.jpg" width="200" alt="Mary Cole" /></a>
        <p><strong>Mary Elizabeth Cole</strong><br>
        Anthropology &amp; Biological Sciences</p>
        <p><em>Here I am standing at the highest point of Bodiam Castle in East Sussex, England. I loved travelling to cultural sites during my study abroad experience.</em></p>
        <p><a href="bios.html#MCole">Read Bio</a></p>
        <p><a href="http://www.youtube.com/embed/WG4B9e7A5pA" target="_blank"><img src="images/video_icon2.png" height="29" border="0" alt="Watch video &gt;"></a></p>
        </li>

И вот соответствующий код на странице биографии пункта назначения:

    <div id="main" role="main">

       <ul id="tiles">

          <li style="background-color:#FFC;">
         <div id="MCole" class="pic"> 
         <img src="images/photos/MaryCole.jpg" width="240" alt="Mary Cole, Valedictorian" /></div>
        <h3>Mary Elizabeth Cole</h3>


<p style="color:#333;"><strong>Plans: Ph.D., Biological Anthropology, The Ohio State University</strong><br>

B.A., Cultural Anthropology; B.S., Biological Sciences<br>

<em>Summa Cum Laude</em><br>

Hometown: Hanover, Maryland</p>

<p>Mary Elizabeth Cole, valedictorian of UMBC’s class of 2012, is a true Renaissance scholar. She is a Humanities Scholar double-majoring in cultural anthropology and biology who has shined in both fields. Mary Beth has sought out a range of research opportunities at UMBC, gaining early experience in UMBC’s Ecology and Evolution Lab. This prepared her for more independent research at the National Institutes of Health. She later completed archaeological field and lab work at colonial and prehistoric American Indian sites in southern Maryland. Mary Beth creatively wove together her interests in cultural anthropology and biology through study abroad at the University of Kent in Canterbury, England, where she completed human osteology coursework to prepare for graduate school. She has been awarded a fellowship for the biological anthropology Ph.D. program at The Ohio State University, which focuses on the history and patterns of disease as discerned through skeletal remains. In addition to pursuing an academic career, Mary Beth hopes to assist military and archaeological groups on post-conflict skeletal recovery. Mary Beth has given back to her community by helping with local speech and debate tournaments for home-schooled teens; tutoring students in chemistry, math and SAT preparation; and participating in Scholar Selection Day and other prospective student events at UMBC.</p>

<p><em>"At prospective student events I attended, Dr. Hrabowski promised that as long as we worked hard to pursue our dreams, UMBC would do everything possible to transform our efforts into our successes. Throughout my four years, I have seen this university fulfill and exceed that promise in every way possible. The anthropology department, despite its small size, has recruited some of the most intelligent, insightful and encouraging minds in the country. My mentors there provided the education, guidance and endless recommendations that pointed me towards my dream of becoming a biological anthropologist. The biology department provided the coursework and experience that I needed to secure lab experience at UMBC and then NIH. Without these stepping stones to my NIH internship, I would not have discovered the bone histology that I hope to pursue in my doctoral program.” </em>
</p>

<p><iframe width="530" height="298" src="http://www.youtube.com/embed/WG4B9e7A5pA" frameborder="0" allowfullscreen></iframe>
</p>
        </li>

          <li style="background-color:#FFC;">

       <div class="pic" id="RWardlow"> 
        <<img src="images/photos/RobertWardlow.jpg" width="240" alt="Robert Wardlow, Salutatorian" >
        </div>
        <h3>Robert  Douglass Wardlow II</h3>
<p style="color:#333;"><strong>Plans: M.D./Ph.D., Johns Hopkins University</strong><br>
B.S., Biochemistry & Molecular Biology<br>
<em>Summa Cum Laude</em><br>
Hometown: Cherry Hill, New Jersey</p>

<p>As the salutatorian of the class of 2012, Robert Wardlow’s career at UMBC has been full of accomplishments. A Meyerhoff Scholar, Barry M. Goldwater Scholar, Howard Hughes Medical Institute Scholar and Rhodes Scholarship finalist, he has presented his research at 12 conferences and symposia, earning numerous awards. Robert’s research focuses on chemical signaling of heart cells and the potential of certain stem cells for providing therapeutic benefits for damaged cells. Excellence in scholarship is intimately connected to community service for Robert. He co-founded the student group Men Achieving Leadership, Excellence and Success (MALES) to promote community activism, leadership and academic excellence. Robert’s accomplishments have earned him admission into the Phi Beta Kappa, Phi Kappa Phi and Golden Key International honor societies, and he received the HHMI Gilliam Fellowship for Advanced Study.</p>

<p><em>“UMBC has provided an environment rich in resources that has helped me to develop to a level far beyond what I could have originally expected. I was able to display tremendous personal growth over the course of my time here both academically and socially. Courses were challenging, but the school offered more than enough support in terms of tutoring and advising to help me best deal with the load. I had numerous chances to further my research career by gaining experience in research labs both in the area and around the country. I have made friends here that will hopefully last long in to the future as well as meeting mentors that will continue to guide me in the right direction. UMBC has helped me in all facets of my personal and professional development and I hope that I will be able to give back to the school in some capacity in the future.”</em></p>

<p><iframe width="530" height="298" src="http://www.youtube.com/embed/BJXAazzRP10" frameborder="0" allowfullscreen></iframe>
</p>
 </li>

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


person Haikukitty    schedule 18.05.2012    source источник
comment
Если бы вы могли опубликовать часть своего кода здесь, это было бы здорово.   -  person SomeKittens    schedule 18.05.2012
comment
Вы пытались поместить атрибут id в тег h3 вместо div? Это может иметь какое-то отношение к изображению в якоре.   -  person iddo    schedule 18.05.2012
comment
@Iddo: Нет, не пробовал, стоит попробовать. Я попробую и посмотрю, есть ли разница.   -  person Haikukitty    schedule 18.05.2012
comment
@Huangism: я не понимаю этот комментарий, но он не особенно полезен.   -  person Haikukitty    schedule 18.05.2012
comment
@SomeKittens: Готово! Спасибо, что посмотрели. :)   -  person Haikukitty    schedule 18.05.2012
comment
@Haikukitty Я говорю, что вы обнаружили ошибку Chrome, например, ошибку в браузере, которую вы, возможно, не сможете исправить. Это простой внутренний тег, который должен работать в любом браузере, но не в Chrome, так что это ошибка. но глядя на ваш код назначения, у вас нет внутренней ссылки   -  person Huangism    schedule 18.05.2012
comment
@Iddo: я попытался поместить идентификатор в тег H3, а также попытался использовать тег LI. Оба варианта по-прежнему отлично работают в FF, но не в Chrome. Однако за идею спасибо!   -  person Haikukitty    schedule 18.05.2012
comment
Я согласен. Ваш код выглядит нормально. Прежде чем объявить это ошибкой Chrome, я узнаю, есть ли у других такая же проблема (попробуйте на другом ПК и т. д.).   -  person SomeKittens    schedule 18.05.2012
comment
@Huangism: Извините, может быть, я немного обидчив! Но кроме того, не думаете ли вы, что такой общий элемент кодирования был бы найден и задокументирован раньше? Я чувствую, что более вероятно, что я делаю что-то не так... как-то.   -  person Haikukitty    schedule 18.05.2012
comment
Я попробовал этот сайт на Mac, который я использую, ошибка сохраняется, но я бы посоветовал сначала попробовать с href=name   -  person Huangism    schedule 18.05.2012
comment
@SomeKittens: да. Он реплицируется в браузерах Chrome как для Mac, так и для ПК на нескольких компьютерах. И чтобы все усложнить, мне только что сообщили, что такая же проблема возникает в IE. (IE7, я думаю)   -  person Haikukitty    schedule 18.05.2012
comment
@Huangism: Вы имеете в виду старый стиль атрибута тега name = привязки? Я тоже пробовал это - на самом деле я изначально закодировал его таким образом и подумал, что, возможно, проблема была в ЭТОМ, поскольку атрибут имени устарел. Нет такой удачи.   -  person Haikukitty    schedule 18.05.2012
comment
использование привязки с именем работает в хроме и, скорее всего, во всех браузерах. Так что вы можете назвать это ошибкой Chrome или назвать Chrome недостаточно современным.   -  person Huangism    schedule 18.05.2012
comment
@HaikukittyЯ только что попробовал старый стиль, и он отлично работает в Chrome.   -  person Huangism    schedule 18.05.2012
comment
Ах, IE 7, как я тебя ненавижу. Вы динамически загружаете контент? Chrome может пытаться получить идентификатор, но его там нет, потому что элемент еще не загружен. Chrome недостаточно современный? ХА!   -  person SomeKittens    schedule 18.05.2012
comment
Использование идентификаторов работает в последней версии Chrome в Windows, протестировано с использованием этого: jsfiddle.net/VySQA   -  person shanethehat    schedule 18.05.2012
comment
@shanethehat это не то, чем он хочет заниматься. он хочет перейти с одной страницы на другую не на той же странице   -  person Huangism    schedule 18.05.2012
comment
@shanethehat - ты прав. У меня это работает как ссылка ВНУТРЕННЯЯ СТРАНИЦА. Но это НЕ работает, когда я ссылаюсь на привязку или идентификатор на отдельной странице назначения....   -  person Haikukitty    schedule 18.05.2012
comment
@SomeKittens: я думал, что - на самом деле не динамическая загрузка контента - весь контент находится прямо там, на HTML-странице, - но макет определяется, так сказать, на лету, на основе ширины экрана / браузера, и мне интересно, если это это то, что вызывает проблему. Любые идеи о возможных других решениях, которые я мог бы использовать вместо этого?   -  person Haikukitty    schedule 18.05.2012


Ответы (4)


Попробуйте этот грязный лайфхак,

var hash = location.hash;
location.hash = '';
location.hash = hash;

on window load or document.ready

person Jashwant    schedule 18.05.2012
comment
На самом деле, он работает на платформе Windows 7 (последний хром 19.0.1084.46 м) - person Jashwant; 18.05.2012
comment
Ты обалденный!! Я поместил ваш хак в свой 'imagesLoaded(function()'), и он РАБОТАЕТ! Большое вам спасибо!! - person Haikukitty; 18.05.2012

Когда страница загружается, похоже, что li установлены на display: none, а затем изменены на display: list-item с помощью JavaScript. Скорее всего, Chrome/IE пытаются перейти к блоку сразу после загрузки HTML, но блоки еще не отображаются.

Я предполагаю, что это ваша проблема. У вас также странная установка, с блоками с абсолютным позиционированием (я думаю, это плагин wookmark?). Кажется, то же самое можно сделать с помощью простого CSS без абсолютного позиционирования.

person kitti    schedule 18.05.2012
comment
Да, это код ксилографии, и, возможно, его можно было бы сделать по-другому. Как это всегда бывает с моей работой, этот сайт был в большой спешке, поэтому у меня не было роскоши времени, чтобы придумать лучший способ его кодирования. Я просто использовал готовое клеймо, так как оно сработало... - person Haikukitty; 18.05.2012

Этот:

$( "[href^=#]" ).click(function() {
    location.hash = $(this).attr("href")
})

работал на меня. Как уже упоминалось, это ошибка в Chrome.

person spedy    schedule 17.10.2017

Я думаю, что код назначения не имеет якоря

<a name="bioName">

Обновлять

Тестирование с использованием идентификаторов тоже работает, но не на вашей странице. может это содержимое

person Huangism    schedule 18.05.2012
comment
Это неправильно. См. вторую половину этого: yourhtmlsource.com/text/internallinks.html. - person SomeKittens; 18.05.2012
comment
Точно ваш код? Связывание с идентификаторами? Да. И это работает. И это лучшая практика. - person SomeKittens; 18.05.2012
comment
Попробуйте якорь на странице-примере и посмотрите, работает ли он при редактировании Chrome: Ну, я только что попробовал, и он работает. - person Huangism; 18.05.2012
comment
Изначально моя био-страница была настроена таким образом — ‹a name=JSmith›‹/a› — и это не сработало ни у меня (Chrome на Mac), ни у моего коллеги, который использует Chrome на ПК. Вот почему я переключился на более правильный id=JSmith в надежде решить проблему. - person Haikukitty; 18.05.2012
comment
как создается контент? Я тестировал простую пустую страницу с кучей BR, и все работало нормально в обоих направлениях. - person Huangism; 18.05.2012