كيف يمكن أن يؤثر جزء عنوان URL على تخطيط CSS؟

StackOverflow https://stackoverflow.com/questions/1216299

سؤال

قارن عناوين URL الثلاثة هذه (انظر إلى شريط التنقل العلوي في كل حالة):

  1. http://fast.kirkdesigns.co.uk/blog
  2. كما هو مذكور أعلاه ولكن مع جزء عنوان URL #navigation
  3. كما هو مذكور أعلاه ولكن مع جزء عنوان url #node-2655

لاحظ أن الاختلاف الوحيد هو جزء عنوان URL الموجود في النهاية.

يتم عرض الصفحتين الأوليين بشكل جيد تمامًا (في Firefox على الأقل).إنها الثالثة حيث تكمن المشكلة.يقوم الجزء #node-2655 بدفع شريط التنقل العلوي بعيدًا عن الجزء العلوي من الشاشة.عندما تقوم بعد ذلك بالتمرير مرة أخرى إلى أعلى الصفحة، يكون شريط التنقل قد تم قطعه إلى النصف.يحدث هذا عند استخدام أي جزء من عنوان URL يؤدي إلى خروج شريط التنقل من إطار العرض الأولي عند تحميل الصفحة لأول مرة.

إذًا، كيف يمكن أن يؤثر استخدام جزء عنوان URL على تخطيط CSS بهذا الشكل؟!

الحل:كما هو مقترح أدناه، إزالة الفائض:تم إخفاء المشكلة في عنصر الحاوية الذي يحمل شريط التنقل.أحب أن أفهم لماذا بالرغم من ذلك!

هل كانت مفيدة؟

المحلول

مسح ال overflow:hidden على #main في css_75afd7072eaf4096aaebf60674218e31.css

نصائح أخرى

أود أن أقول إنه خطأ في العرض في FireFox كما هو جيد في Opera.لا ينبغي أن يكون هناك أي مرساة من شأنها أن تغير CSS كما تقول (إلا إذا كنت تستخدم jQuery أو شيء من هذا القبيل).

أواجه هذه المشكلة أيضًا، وأعتقد أنني أستطيع رؤية ما يحدث.

كتلة "العمود" ذات الهامش الضخم (5678 بكسل) والحشوة تجعل هذه الكتلة طويلة جدًا.في المتصفحات الأخرى غير Firefox، تلغي القيم الإيجابية والسلبية بعضها البعض، ولكن FF يجعلها طويلة جدًا - نوعًا ما.

يعرف FF أيضًا أن الاثنين يلغيان بعضهما البعض، ولكن يبدو أنه ينظر إلى الحشو بحجم 5678 بكسل ويقرر أن كتلة العمود تنبثق الجزء السفلي من كتلة #wrapper.يعد هذا تجاوزًا - ومع ضبط التجاوز على الوضع التلقائي على #wrapper، يمكنك رؤية الحجم الحقيقي لـ #wrapper مع وجود شريط تمرير أسفل الجانب.

مع تعيين الفائض على مخفي، يزيل FF شريط التمرير، ولكن يبدو أنه يقوم بتمرير محتويات #wrapper بحيث يكون العنصر الذي يشير إليه الجزء في أعلى الصفحة.يعد هذا سلوكًا طبيعيًا للروابط المجزأة في الكتل القابلة للتمرير، ولكن نظرًا لعدم وجود شريط تمرير، لا يمكنك تمرير المحتوى مرة أخرى لأسفل مرة أخرى، ومن ثم يبدو أن التخطيط قد تأثر بالجزء.

باختصار، أظن أن FF يقوم بتشغيل شريط تمرير غير مرئي في هذا المثال.يمكن اعتبار ذلك خطأً، لكنه على الأرجح سلوك صحيح.إن القدرة على تمرير المحتوى لأعلى ولأسفل داخل كتلة ذات حجم ثابت غير مكتظة باستخدام أجزاء عنوان URL، هي تقنية يمكن استخدامها بشكل فعال لتنفيذ "شرائح تمرير" الصور التي تعمل حتى في حالة عدم وجود JavaScript.

امل ان يساعد.لقد كان هذا الأمر يحيرني لسنوات، وفجأة صدمني هذا التفسير فجأة.الحل البديل الحالي لهذا هو استخدام البرنامج المساعد jQuery "التمرير إلى" لتمرير الصفحة بأكملها لأسفل إلى الجزء، حيث يبدو أن هذا يمنع محتويات #wrapper من التمرير داخليًا.

يمكنك أيضًا أن تأخذ "عرض:مخفي" خارج الغلاف، لكن صفحتك تنتهي بعد ذلك بطول نصف ميل.

سأشير فقط إلى أنه قد يكون هناك بعض الميراث الغريب من أكثر من 30 ورقة أنماط مرتبطة في الرأس.ربما لا يوجد أيضًا، ومن المحتمل أن يكون خطأ في العرض (من المحتمل أن يكون مرتبطًا بـ :target التصميم) الذي اقترحه دان.لقد شعرت أنه من المفيد الإشارة إلى أنه إذا كان لديك أكثر من ثلاثين ورقة أنماط، فمن المحتمل أن تبدأ في رؤية بعض الغرابة، مهما كان ما قد يحدث.

السبب هو أن العمود ذو الحشوة الكبيرة قد قام بتوسيع حاويته، ولكن التوسيع مخفي بعد ذلك ولكن تجاوز السعة: مخفي؛ولكن مع استخدام الجزء، يتم تمريره إلى موضع الجزء، مما يؤدي إلى تقطيع أي شيء فوق ذلك بشكل فعال.يمكنك استخدام جافا سكريبت وضبط التمرير إلى 0 ثم تمريره مرة أخرى إلى الوضع الطبيعي.

في الأساس حالة حافة غريبة لا يبدو أن المتصفحات تتعامل معها بشكل جيد.

آسف، هذه ليست "إجابة"، ولكنها رد على التعليقات الأخرى هنا.هذه المشكلة هي مجرد مذهل.من السهل جدًا عزلها (أي لا علاقة لها بعدد أوراق الأنماط)، وليس لها "حل" مناسب، حيث لا توجد طريقة لتحقيق العرض المطلوب.

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  margin: 1em auto;
  width: 40em;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
  float: left;
  margin-bottom: -5678px;
  padding-bottom: 5678px;
  width: 50%;
}
#footer {
  background-color: #eee;
  padding: 1px;
  text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li><a href="#p1">Jump to P1</a></li>
<li><a href="#p2">Jump to P2</a></li>
<li><a href="#p3">Jump to P3</a></li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>

كملاحظة جانبية، يتم استخدام التقنية المذكورة أعلاه بشكل عام لتوفير تخطيطات متعددة الأعمدة مرنة العرض.من المحتمل أن يصبح هذا أقل أهمية هذه الأيام نظرًا لأن التخطيطات ذات العرض الثابت أصبحت أكثر تعليقًا - فالمتصفحات قادرة على تكبير صفحة الويب لرؤية نص صغير، كما أن العرض الثابت يجعل التحكم في طباعة الصفحة أسهل كثيرًا، على سبيل المثالقم بتعيين العرض (بالـ ems) لعرض الكلمات التسع المثالية لكل سطر بغض النظر عن حجم الخط والتكبير الذي يختاره المستخدم.

آسف إذا كان هذا لا يبدو كإجابة، ولكنه يقترح بشكل أساسي تجاهل هذا النموذج القديم والتفكير في الانتقال إلى أعمدة ذات عرض ثابت (وهو موضوع جديد تمامًا).

لقد تمكنت من حل هذه المشكلة باستخدام بعض جافا سكريبت لتمرير النص إلى الموضع الذي تم تمرير العنصر المخفي الفائض إليه.

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top