IE10'daki kaydırma çubuğunun içeriğin üzerine yerleşmesini nasıl önleyebilirim?

183

IE10'da, kaydırma çubuğu her zaman orada değildir ... ve göründüğünde bir yer paylaşımı olarak gelir ... Bu harika bir özellik ama tam ekran uygulaması olduğu için belirli web sitem için kapatmak istiyorum ve benim logolar ve menüler arkasında kaybolur.

IE10:

resim açıklamasını buraya girin

KROM:

resim açıklamasını buraya girin

Herkes kaydırma çubuğu IE10 pozisyonda sabit olmanın bir yolu biliyor mu?

overflow-y: scroll çalışmıyor! sadece web siteme kalıcı olarak koyar.

Soruna neden olan bootstrap olabilir ama hangi kısım hakkında hiçbir fikrim yok! buradaki örneğe bakın: http://twitter.github.io/bootstrap/

— Jimmyt1988
kaynak

Benim IE10 bu davranışa sahip değil, bir "Metro" uygulaması olarak çalıştırıyor musunuz?

— xec

Hayır değilim. Herhangi bir fark yaratırsa, Windows 8'deyim. Dizüstü bilgisayarımda da aynı şey var ... Örneğin, stackoverflow gibi diğer web siteleri bunun etrafında bir yol bulduğu için bu kaydırma çubuğu davranışını fark etmeyebilirsiniz ... Umarım yeni resim yaptığım ve yapmadığım arasındaki farkı ayırt etmeye yardımcı olur istiyorum

— Jimmyt1988

Sayfanın ayarlanmış genişliği ile bir ilgisi var mı?

— Albzi

Sayfanın genişliğini ayarlamak işe yarayacaktır .. ne yazık ki, bir çapraz tarayıcı yolu olup olmadığını merak ediyordum. firefox, safari ve chrome dikkate alındığında bu davranış yoktur. Ben IE10 özel doo-raggy kullanabilirsiniz sanırım .. sadece en şık cevap gibi görünmüyor.

— Jimmyt1988

@JamesT Ben de w8'deyim, ancak IE10'un kaydırma çubuğunu bir yer paylaşımı olarak oluşturmasını sağlayan herhangi bir sayfa bulamıyorum (hatta benim test sayfam bile değil, www.arngren.net)

— xec

163

Biraz googling yaptıktan sonra, "Mavi Mürekkep" tarafından bırakılan bir yorumun belirttiği bir tartışmaya rastladım:

Sayfaları inceleyerek, şunu kullanarak çoğaltmayı başardım:

@ -ms-viewport {width: aygıt genişliği; }

bu da kaydırma çubuklarının saydam olmasına neden olur. Mantıksal, çünkü içerik artık tüm ekranı kaplıyor.

Bu senaryoda, şunu ekleyin:

taşma-y: otomatik;

kaydırma çubuklarını otomatik gizleme yapar

Ve bootstraps Responsive-utilities.less dosyasında, satır 21'de aşağıdaki CSS kodunu bulabilirsiniz

// 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;
}

Bu snippet, davranışa neden olan şeydir. Yukarıdaki yorum kodunda listelenen bağlantıları okumanızı tavsiye ederim. (Bu cevabı başlangıçta gönderdikten sonra eklendi.)

— XEC
kaynak

74

Siz bir beyefendi ve bilginsiniz! @ -Ms-viewport {width: auto! İmportant; } benim css

— dosyama

4

harika cevap, bootstrap'ın yorumunda atıfta bulunulan makaleyi okumanızı başkalarına tavsiye ederim: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - bu kodu bootstrap'tan kaldırmak IE10 yanıtını bozabilir Windows 8 metro

— tmsimont

@tmsimont İyi bir nokta. Ayrıca bunlar artık "bu uygulamak için bir UA koklama script kullanımı söz (yeni yorumlarla benim cevap güncellendi) son Boostrap kaynak dosyada yorumunu, değişmiş gibi görünüyor sadece Yüzey / masaüstü Windows 8" - çek sorun bağlantısını çıkarın github.com/twbs/bootstrap/issues/10497

— xec

1

Ben gerçekten bootstrap seviyorum ama keşke medya ve görünüm seçenekleri farklı bir dosyada ayırmak istiyorum. İlk kez duyarlı bir web sitesi inşa ediyordum ve tam anlamıyla sitemin istediğim şekilde çalışmasını sağlamak için bootstrap'tan bir ton şey çıkarmak zorunda kaldım.

— David

9

-ms-taşma stili: kaydırma çubuğu; daha temiz bir çözüm gibi görünüyor (ikinci cevaba bakınız).

— Manuel Arwed Schmidt

179

Cevabında xec'in belirttiği gibi, bu davranış @ -ms-viewport ayarından kaynaklanır.

İyi haber, kaydırma çubuklarını geri almak için bu ayarı kaldırmanız gerekmemesi (bizim durumumuzda duyarlı web tasarımı için @ -ms-viewport ayarına güveniyoruz).

Bu makalede bahsedildiği gibi taşma davranışını tanımlamak için -ms-overflow-stilini kullanabilirsiniz:

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

Kaydırma çubuklarını geri almak için stili kaydırma çubuğuna ayarlayın:

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

kaydırma çubuğu

İçeriğinin taşması durumunda öğenin klasik kaydırma çubuğu türü bir denetim görüntülediğini gösterir. -Ms-autohiding-scrollbar öğesinin aksine, -ms-overflow-style özelliği kaydırma çubuğuna ayarlanmış öğelerdeki kaydırma çubukları her zaman ekranda görünür ve öğe etkin olmadığında solmaz. Kaydırma çubukları içeriği kaplamamaktadır ve bu nedenle öğenin göründüğü kenarları boyunca fazladan düzen alanı kaplar.

— stefan.s
kaynak

9

Bunu html öğesine ekledim, yani html{-ms-overflow-style: scrollbar;}benim için çalıştı. Bunun başka bir yerde ihtiyaç duyulduğu kullanım durumları var mı?

— nHaskins

7

body{-ms-overflow-style: scrollbar;}benim için iyi çalışıyor .. Teşekkürler

— Manjit Singh

15

Cevap bu olmalı. Kabul edilen, görünüm alanı aygıt uyumunu kaldırır.

— mnsth

x üzerinde taşma ekler

— Monicka

1

@ stefan.s bu doğru cevap! Kabul edilmelidir

— eirenaios

12

ÇÖZÜM: İki adım - IE10 olup olmadığını tespit edin, ardından CSS kullanın:

bunu init üzerinde yap:

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

Bu CSS'yi ekle:

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

Neden çalışıyor:

overflow-y:scrollKalıcı açar <body>etiketi dikey kaydırma.
-ms-overflow-style:scrollbarOtomatik gizleme davranışı kapalı dönüşler, böylece üzerinden içerik bastırıyor ve hepimizin alışık kaydırma çubuğu düzeni davranışı vererek.

IE11 hakkında sorular soran kullanıcılar için güncellendi. - Referans https://docs.microsoft.com/tr-tr/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

— gdibble
kaynak

14

neden sadece body {-ms-overflow-style: scrollbar; }?

— Scott Romack

7

-1 Kodunuz IE11 üzerinde çalışmaz ve yayınlandığında IE12'de çalışmaz. IE'ye özgü stilleri yapmanın daha iyi yolları var.

— Joseph Lennox

1

@JosephLennox IE'ye özgü stilleri yapmanın daha iyi bir yolunu belirtmek için bir yanıt ekleyebiliyorsanız, eminim hem gdibble'ın hem de bu soruya gelen diğer kişiler bunu takdir edecektir.

— Göze Çarpan Derleyici

2

@ConspicuousCompiler "-ms-" öneki zaten yeterli düzeyde IE olmasını sağlar.

— Joseph Lennox

5

Bu @ stefan.s'ın cevabı gibidir, ancak gereksiz şişkinlik ile.

— Ry-

4

Bunu dene

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

— user2606817
kaynak

0

Bu sorun Bootstrap 4'teki Datatables ile de yaşanıyor. Mi çözümü:

İe tarayıcısının açılıp açılmadığı kontrol edildi.
Tablo-duyarlı-ie sınıfı için tabloya duyarlı sınıf değiştirildi.

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
kaynak

-4

@ -Ms-viewport ve diğer önerileri denedim ama hiçbiri Windows 7'de IE11 ile benim durumumda çalıştı. Ben hiçbir kaydırma çubukları vardı ve burada diğer mesajlar en çok bana rağmen hiçbir yerde kaydırma bir kaydırma çubuğu verecekti bol miktarda içerik. Bu makaleyi http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ adresine düşürdü. . .

body { overflow-x: visible; }

. . . ve benim için hile yaptı.

— Toadmyster
kaynak

2

Soru, kaydırma çubuklarının eksik olması değil, önyükleme kullanılırken yan etki olarak sunulan yarı saydam kaydırma çubuklarının yer paylaşımı ile ilgilidir. Ayrıca deneyebilirsinizbody { overflow: auto; }

— xec