2012-05-18 24 views
1

編輯添加:有趣的是 - 根據以下人員的評論 - 我嘗試在我的主頁面中設置跳轉鏈接 - 並且工作得很好。 (http://www.umbc.edu/classof2012/index2.html - 它在段落文本的左上角) 因此,無論出於何種原因,它在鏈接到單獨的目的地頁面時都會出現問題。 ..鉻錯誤或編碼錯誤?目的地頁面中的錨點/編號鏈接不工作

我有一個頁面充滿了照片/標題 - 點擊照片或文本鏈接後,瀏覽器被帶到一個新的頁面與相關的BIOS。這個想法是,他們被直接帶到與他們點擊的照片相關的生物。這在Safari和Firefox中運行良好。

在Chrome中,所有鏈接都會將您帶到生物頁面的頂部,而不是頁面中的相關生物。

我在這裏錯過了什麼?這應該是一件簡單的事情,對吧?

該頁面在這裏可以查看:http://www.umbc.edu/classof2012/

我試圖找到這是一個Chrome的問題的一些文件,我還沒有發現任何明確的。我在SO上發現了一些似乎涉及類似問題的問題,但沒有提到簡單的基本鏈接鏈接無法正常工作。這可能是因爲我做了一些錯誤,只有Chrome瀏覽器很搶眼,但鏈接代碼看起來非常簡單,過去一直對我有用 - 除非我錯過了一些明顯的錯誤!

如果這是一個Chrome idiosyncrasy,任何人都可以提出一種可以在所有瀏覽器中使用的替代解決方案嗎?

謝謝!

編輯追加的代碼片段...

這裏的原始頁面的代碼......它繼續上超出了我已經張貼,但它更多的相同:

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> 

如果有人在這裏的東西全碼會有所幫助,我很高興這樣做。當它是一堆重複元素時,只是不想有太多的代碼來通過。

+0

可能是一個鉻臭蟲lol – Huangism

+0

如果你可以在這裏發佈你的一些代碼,那會很棒。 – SomeKittens

+0

你有沒有嘗試把id屬性放在h3標籤而不是div上?這可能與主播中的圖像有關。 – iddo

回答

5

試試這個黑客,

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

window loaddocument.ready

+0

其實,它適用於Windows 7平臺(最新鉻19.0.1084.46米) – Jashwant

+0

你真棒!我把你的黑客放在我的'imagesLoaded(function()'中,它很好用!謝謝你,非常感謝! – Haikukitty

+0

不客氣! – Jashwant

-1

我認爲目標代碼沒有錨

<a name="bioName"> 

更新

試井使用IDS的工作爲好,只是沒有在網頁上。也許是內容

+0

這是不正確的。見下半部分:http://www.yourhtmlsource.com/text/internallinks.html – SomeKittens

+0

你試過了嗎? – Huangism

+0

你的代碼是否準確?號碼鏈接到id?是。它的工作原理。這是最佳實踐。 – SomeKittens

2

頁面加載時,它看起來像li s被設置爲display: none,然後通過JavaScript更改爲display: list-item。一旦加載HTML,Chrome/IE很可能會跳轉到該塊,但塊尚未顯示。

我想這就是你的問題。這是一個奇怪的設置,你也有絕對定位的塊(我認爲這是wookmark插件?)—它似乎可以做與沒有絕對定位的普通CSS相同。

+1

是的,這是woodmark代碼,它有可能以不同的方式完成。我的工作總是如此,這個網站是一個很大的衝擊,所以我沒有花時間找出編碼的最佳方式。我只是使用「現成的」woodmark,因爲它做的工作... – Haikukitty

0

此:

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

爲我工作。和其他人一樣,這是Chrome中的一個bug。