क्यों यह पेज लेआउट तोड़ने जब एक लंगर लिंक प्रयोग किया जाता है

Question

मेरे पेज http://dl.dropbox.com/u/49912546/anchor_link_test.htm प्रदर्शित करता है अलग ढंग से एक लंगर भी http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s प्रयोग किया जाता है जब है - किसी छवि नीचे सामग्री को ले जाया जाता है थोड़ा

यह लगातार ब्राउज़रों में होता है, तो वहाँ होना चाहिए कल्पना में कुछ जिसका मतलब है कि यह सही व्यवहार है ... लेकिन क्या? यह तब होता है जब कोई छवि लोड होती है (यदि src अमान्य है तो बग नहीं होता है)।

* संपादित वैसे, मैं एक समाधान पहले से ही http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s पाया, तो मैं बग समाधान के लिए नहीं देख रहा हूँ - मैं सिर्फ जानना चाहता है कि सभी ब्राउज़रों सीएसएस कार्यान्वयन है कि इस व्यवहार का कारण है चाहता हूँ।

Answer 1

half content क्योंकि .panel ऊपर की तरफ शिफ्ट करने के लिए प्रकट होता है अपने भीतर स्थित है overflow:hidden को & सामग्री है कि एक परिणाम के रूप में काटा जा रहा है है निहित।

जब ब्राउजर नामित एंकर में तत्व की पहचान करने का प्रयास करता है तो यह उसे एक कंटेनर के भीतर देखता है जो इसकी सामग्री को & क्लिप कर सकता है ताकि यह दिखाई देने के लिए शीर्ष पर उस तत्व को स्क्रॉल कर सके।

उदाहरण के लिए यदि आप contentInner भीतर लेकिन नाम h3 के ऊपर किसी भी तत्वों को जोड़ने के लिए गए थे, तो वे नहीं पृष्ठ पर दिखाई जब नामित लंगर के रूप में half content स्क्रॉल किया जाता है ताकि h3 शीर्ष पर है इस्तेमाल किया गया था होगा। अतिप्रवाह को हटाने

Answer 2

मेरे मामले में, (एक ही परिणाम के रूप में अगर overflow:scroll लागू किया गया नामित लंगर नामित तत्व के शीर्ष के साथ लाइन में ही स्थित करने के लिए स्क्रॉलबार का कारण बनता है): छिपा काम किया

#maincontent { 
    width: 100%; 
    background: transparent; 
    /* overflow: hidden; */ 
    clear:both; 
}