ฉันจะป้องกันเนื้อหาซ้อนทับของแถบเลื่อนใน IE10 ได้อย่างไร

183

ใน IE10 แถบเลื่อนไม่ได้มีเสมอ ... และเมื่อมันปรากฏขึ้นมาเป็นภาพซ้อนทับ ... มันเป็นคุณสมบัติเจ๋ง แต่ฉันต้องการปิดสำหรับเว็บไซต์เฉพาะของฉันเนื่องจากเป็นแอปพลิเคชันแบบเต็มหน้าจอและของฉัน โลโก้และเมนูต่าง ๆ จะสูญหายไป

IE10:

ป้อนคำอธิบายรูปภาพที่นี่

โครเมียม:

ป้อนคำอธิบายรูปภาพที่นี่

ใครรู้วิธีการเลื่อนแถบเลื่อนได้รับการแก้ไขในตำแหน่งบน IE10?

ล้น - y: เลื่อนดูไม่ทำงาน! มันแค่วางไว้อย่างถาวรบนเว็บไซต์ของฉัน

อาจเป็น bootstrap ทำให้เกิดปัญหา แต่ส่วนใดที่ฉันไม่รู้ ดูตัวอย่างได้ที่นี่: http://twitter.github.io/bootstrap/

— Jimmyt1988
แหล่งที่มา

IE10 ของฉันไม่มีพฤติกรรมนี้คุณเรียกใช้เป็นแอพ "Metro" หรือไม่?

— xec

ไม่ใช่ฉัน. ฉันอยู่ใน windows 8 ถ้ามันสร้างความแตกต่าง มันเหมือนกันกับแล็ปท็อปของฉันเช่นกัน ... คุณอาจไม่สังเกตเห็นพฤติกรรมของแถบเลื่อนนี้เนื่องจากเว็บไซต์อื่น ๆ เช่น stackoverflow พบวิธีรอบ ๆ ... ฉันหวังว่าภาพใหม่จะช่วยแยกความแตกต่างระหว่างสิ่งที่ฉันทำและไม่ ต้องการ

— Jimmyt1988

มันเป็นสิ่งที่จะทำอย่างไรกับความกว้างชุดของหน้า?

— Albzi

การตั้งค่าความกว้างของหน้าจะทำงาน .. อนิจจาฉันสงสัยว่ามีวิธีข้ามเบราว์เซอร์ เมื่อพิจารณาจาก firefox, safari และ chrome ไม่มีพฤติกรรมนี้ ฉันสามารถใช้ doo-raggy ที่เฉพาะเจาะจงสำหรับ IE10 ได้ฉันคิดว่า .. ดูเหมือนจะไม่ใช่คำตอบที่หรูหราที่สุด

— Jimmyt1988

@ JamesT ฉันอยู่ใน w8 ด้วย แต่ไม่สามารถหาหน้าใด ๆ ที่ทำให้ IE10 แสดงแถบเลื่อนเป็นภาพซ้อนทับ (ไม่ใช่แม้แต่หน้าทดสอบแบบไปที่ www.arngren.net)

— xec

163

หลังจาก googling เล็กน้อยฉันก็สะดุดในการอภิปรายที่ความคิดเห็นที่เหลือโดย "Blue Ink" ระบุ:

ตรวจสอบหน้าฉันจัดการเพื่อทำซ้ำโดยใช้:

@ -ms-viewport {width: device-width; }

ซึ่งทำให้แถบเลื่อนกลายเป็นโปร่งใส เหมาะสมแล้วเนื่องจากตอนนี้เนื้อหาเต็มหน้าจอ

ในสถานการณ์นี้เพิ่ม:

ล้น - y: อัตโนมัติ;

ทำให้แถบเลื่อนซ่อนอัตโนมัติ

และในbootstraps responsive-Utilities.less ไฟล์บรรทัดที่ 21 คุณสามารถค้นหาโค้ด CSS ต่อไปนี้

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

ตัวอย่างนี้เป็นสิ่งที่ทำให้เกิดพฤติกรรม ฉันขอแนะนำให้อ่านลิงก์ที่ระบุไว้ในรหัสความคิดเห็นด้านบน (เพิ่มเข้ามาหลังจากที่ฉันโพสต์คำตอบนี้ครั้งแรก)

— XEC
แหล่งที่มา

74

คุณเป็นสุภาพบุรุษและเป็นนักวิชาการ! ฉันวาง @ -ms-viewport {width: auto! important; } ลงในไฟล์ css ของฉันและไปแก้ปัญหา: D

— Jimmyt1988

4

คำตอบที่ดีฉันอยากจะแนะนำให้คนอื่น ๆ ที่คุณอ่านบทความที่อ้างถึงในความคิดเห็นของ bootstrap: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design- การลบโค้ดจาก bootstrap อาจทำให้ IE10 ตอบสนองต่อการ Windows 8 metro

— tmsimont

@tmsimont จุดดี นอกจากนี้พวกเขาดูเหมือนจะเปลี่ยนความคิดเห็นในไฟล์ต้นฉบับ Boostrap ล่าสุด (อัปเดตคำตอบของฉันด้วยความคิดเห็นใหม่) ซึ่งตอนนี้กล่าวถึงการใช้สคริปต์ดมกลิ่น UA เพื่อใช้สิ่งนี้กับ " เฉพาะ Surface / เดสก์ท็อป Windows 8" - ตรวจสอบ ออกลิงค์ปัญหาgithub.com/twbs/bootstrap/issues/10497

— xec

1

ฉันชอบ bootstrap จริง ๆ แต่ฉันหวังว่าพวกเขาจะแยกตัวเลือกสื่อและตัวเลือกวิวพอร์ตออกเป็นไฟล์อื่น ฉันกำลังสร้างเว็บไซต์ที่ตอบสนองเป็นครั้งแรกและฉันต้องไปและเอาสิ่งต่าง ๆ มากมายจาก bootstrap เพื่อให้เว็บไซต์ของฉันทำงานได้อย่างที่ฉันต้องการ

— David

9

-ms-overflow-style: แถบเลื่อน; น่าจะเป็นทางออกที่สะอาดกว่า (ดูคำตอบที่สอง)

— มานูเอลอาร์เวดชมิดท์

179

ตามที่ xec ได้กล่าวไว้ในคำตอบของเขาพฤติกรรมนี้เกิดจากการตั้งค่า @ -ms-viewport

ข่าวดีก็คือคุณไม่ต้องลบการตั้งค่านี้เพื่อให้ได้แถบเลื่อนกลับ (ในกรณีของเราเราใช้การตั้งค่า @ -ms-viewport สำหรับการออกแบบเว็บที่ตอบสนอง)

คุณสามารถใช้ -ms-overflow-style เพื่อกำหนด behavoir ล้นตามที่กล่าวไว้ในบทความนี้:

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

ตั้งค่าสไตล์เป็นแถบเลื่อนเพื่อให้แถบเลื่อนกลับมา:

body {
    -ms-overflow-style: scrollbar;
}

แถบเลื่อน

ระบุองค์ประกอบที่แสดงการควบคุมชนิดแถบเลื่อนคลาสสิกเมื่อเนื้อหาล้น ซึ่งแตกต่างจาก -ms-autohiding-scrollbar แถบเลื่อนบนองค์ประกอบที่มีคุณสมบัติสไตล์ -ms-overflow ตั้งค่าให้แถบเลื่อนปรากฏบนหน้าจอเสมอและไม่จางหายเมื่อองค์ประกอบไม่ทำงาน แถบเลื่อนจะไม่ซ้อนทับเนื้อหาและใช้พื้นที่เลย์เอาต์เพิ่มเติมตามขอบขององค์ประกอบที่ปรากฏ

— stefan.s
แหล่งที่มา

9

ฉันเพิ่มสิ่งนี้ในองค์ประกอบ html เช่นhtml{-ms-overflow-style: scrollbar;}และมันใช้งานได้สำหรับฉัน จะมีการใช้กรณีที่จำเป็นในที่อื่น ๆ หรือไม่?

— nHaskins

7

body{-ms-overflow-style: scrollbar;}ทำงานได้ดีสำหรับฉัน .. ขอบคุณ

— Manjit Singh

15

นี่ควรเป็นคำตอบ อันที่ยอมรับได้จะลบการปรับตัวของอุปกรณ์ viewport

— mnsth

มันเพิ่มมากเกินไปใน x

— Monicka

1

@ stefan.s นี่คือคำตอบที่ถูกต้อง! ควรได้รับการยอมรับ

— eirenaios

12

สารละลาย:สองขั้นตอน - ตรวจสอบว่า IE10 จากนั้นใช้ CSS:

ทำสิ่งนี้ใน init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

เพิ่ม CSS นี้:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

ทำไมมันถึงได้ผล

overflow-y:scrollเปลี่ยนอย่างถาวรบน<body>แท็กแถบเลื่อนแนวตั้ง
การ-ms-overflow-style:scrollbarปิดการทำงานของการซ่อนตัวอัตโนมัติทำให้เกิดการผลักดันเนื้อหาและทำให้เรามีพฤติกรรมของแถบเลื่อนที่เราคุ้นเคย

อัปเดตสำหรับผู้ใช้ที่ถามเกี่ยวกับ IE11 - อ้างอิงhttps://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

— gdibble
แหล่งที่มา

14

ทำไมคุณไม่เพียงแค่ทำร่างกาย {-ms-overflow-style: scrollbar; }?

— Scott Romack

7

-1 รหัสของคุณไม่ทำงานบน IE11 และจะไม่ใช้ IE12 เมื่อวางจำหน่าย มีวิธีที่ดีกว่าในการทำสไตล์เฉพาะ IE

— โจเซฟเลนน็อกซ์

1

@JosephLennox หากคุณสามารถเพิ่มคำตอบเพื่อระบุวิธีที่ดีกว่าในการทำรูปแบบเฉพาะของ IE ฉันมั่นใจว่าทั้ง gdibble และผู้อื่นที่มาพร้อมกับคำถามนี้จะขอบคุณ

— Compiler ที่เห็นได้ชัดเจน

2

@ConspicuousCompiler คำนำหน้า "-ms-" เพียงพอแล้วทำให้เป็น IE เท่านั้น

— โจเซฟเลนน็อกซ์

5

นี่เป็นคำตอบของ @ stefan.s แต่มีการขยายตัวที่ไม่จำเป็น

— Ry-

4

ลองสิ่งนี้

body{-ms-overflow-style: scrollbar !important;}

— user2606817
แหล่งที่มา

0

ปัญหานี้เกิดขึ้นกับ Datatables บน Bootstrap 4. Mi โซลูชันเดิมคือ:

ตรวจสอบว่าเบราว์เซอร์ ie กำลังเปิดอยู่หรือไม่
แทนที่คลาส table-responsive สำหรับ table-responsive-ie class

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }

— Primoshenko
แหล่งที่มา

-4

พยายาม@ -ms-viewportและข้อเสนอแนะอื่น ๆ แต่ไม่มีใครทำงานในกรณีของฉันกับ IE11 บน Windows 7 ฉันไม่มีแถบเลื่อนและโพสต์อื่น ๆ ที่นี่ที่ส่วนใหญ่จะให้แถบเลื่อนที่ไม่เลื่อนที่ใดก็ได้แม้ว่าจะมี เนื้อหามากมาย พบบทความนี้http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ซึ่งลดเหลือ . .

body { overflow-x: visible; }

. . . และหลอกให้ฉัน

— Toadmyster
แหล่งที่มา

2

คำถามไม่ได้เกี่ยวกับแถบเลื่อนที่หายไป แต่เกี่ยวกับแถบเลื่อนแบบกึ่งโปร่งใสที่นำมาใช้เป็นผลข้างเคียงเมื่อใช้ bootstrap คุณสามารถลองbody { overflow: auto; }

— xec