Source

Webbläsare och enheter

Lär dig mer om webbläsare och enheter, från moderna till gamla, som stöds av Bootstrap, inklusive kända egenheter och buggar för var och en.

Webbläsare som stöds

Bootstrap stöder de senaste, stabila utgåvorna av alla större webbläsare och plattformar. På Windows stöder vi Internet Explorer 10-11 / Microsoft Edge .

Alternativa webbläsare som använder den senaste versionen av WebKit, Blink eller Gecko, antingen direkt eller via plattformens webbvy-API, stöds inte uttryckligen. Bootstrap bör dock (i de flesta fall) visa och fungera korrekt även i dessa webbläsare. Mer specifik supportinformation finns nedan.

Du kan hitta vårt utbud av webbläsare som stöds och deras versioner i vår.browserslistrc file :

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

Vi använder Autoprefixer för att hantera avsett webbläsarstöd via CSS-prefix, som använder Browserslist för att hantera dessa webbläsarversioner. Se deras dokumentation för hur du integrerar dessa verktyg i dina projekt.

Mobil enheter

Generellt sett stöder Bootstrap de senaste versionerna av varje större plattforms standardwebbläsare. Observera att proxywebbläsare (som Opera Mini, Opera Mobiles Turbo-läge, UC Browser Mini, Amazon Silk) inte stöds.

Krom Firefox Safari Android webbläsare & WebView Microsoft Edge
Android Stöds Stöds N/A Android v5.0+ stöds Stöds
iOS Stöds Stöds Stöds N/A Stöds
Windows 10 Mobile N/A N/A N/A N/A Stöds

Desktop webbläsare

På samma sätt stöds de senaste versionerna av de flesta stationära webbläsare.

Krom Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Stöds Stöds N/A N/A Stöds Stöds
Windows Stöds Stöds Stöds, IE10+ Stöds Stöds Stöds inte

För Firefox stöder vi, förutom den senaste normala stabila versionen, även den senaste versionen av Firefox (Extended Support Release) (ESR) .

Inofficiellt borde Bootstrap se ut och fungera tillräckligt bra i Chromium och Chrome för Linux, Firefox för Linux och Internet Explorer 9, även om de inte stöds officiellt.

För en lista över några av webbläsarbuggarna som Bootstrap måste brottas med, se vår Wall of browser bugs .

Internet Explorer

Internet Explorer 10+ stöds; IE9 och nedåt är det inte. Var medveten om att vissa CSS3-egenskaper och HTML5-element inte stöds fullt ut i IE10, eller kräver prefixegenskaper för full funktionalitet. Besök Kan jag använda... för information om webbläsarstöd för CSS3- och HTML5-funktioner. Om du behöver stöd för IE8-9, använd Bootstrap 3.

Modals och dropdowns på mobilen

Översvämning och rullning

Stödet för overflow: hidden;elementet <body>är ganska begränsat i iOS och Android. För detta ändamål, när du rullar förbi toppen eller botten av en modal i någon av dessa enheters webbläsare, <body>kommer innehållet att börja rulla. Se Chrome bugg #175502 (fixad i Chrome v40) och WebKit bugg #153852 .

iOS textfält och rullning

Från och med iOS 9.2, medan en modal är öppen, om den första beröringen av en rullningsgest är inom gränsen för en text <input>eller en <textarea>, kommer <body>innehållet under modalen att rullas istället för själva modalen. Se WebKit-fel #153856 .

Elementet .dropdown-backdropanvänds inte på iOS i nav på grund av komplexiteten i z-indexering. För att stänga rullgardinsmenyn i navigeringsfält måste du alltså direkt klicka på rullgardinselementet (eller något annat element som kommer att utlösa en klickhändelse i iOS ).

Webbläsarzoomning

Sidzoomning presenterar oundvikligen renderingsartefakter i vissa komponenter, både i Bootstrap och resten av webben. Beroende på problemet kan vi kanske åtgärda det (sök först och öppna sedan ett problem om det behövs). Vi tenderar dock att ignorera dessa eftersom de ofta inte har någon direkt lösning förutom hackiga lösningar.

Sticky :hover/ :focuspå iOS

Även :hoverom det inte är möjligt på de flesta pekenheter, emulerar iOS detta beteende, vilket resulterar i "klibbiga" svävningsstilar som kvarstår efter att ha tryckt på ett element. Dessa svävstilar tas bara bort när användare trycker på ett annat element. Detta beteende anses i stort sett oönskat och verkar inte vara ett problem på Android- eller Windows-enheter.

Under hela våra v4 alfa- och betaversioner inkluderade vi ofullständig och kommenterad kod för att välja ett mediefrågeunderlägg som skulle inaktivera hovringsstilar i pekenhetswebbläsare som emulerar hovring. Det här arbetet blev aldrig helt slutfört eller aktiverat, men för att undvika fullständigt brott har vi valt att fasa ut detta shim och behålla mixinerna som genvägar för pseudo-klasserna.

Utskrift

Även i vissa moderna webbläsare kan utskrift vara knäppt.

Från och med Safari v8.0 kan användning av klassen fast bredd .containergöra att Safari använder en ovanligt liten teckenstorlek vid utskrift. Se nummer #14868 och WebKit-fel #138192 för mer information. En möjlig lösning är följande CSS:

@media print {
  .container {
    width: auto;
  }
}

Android lager webbläsare

Ur lådan levereras Android 4.1 (och till och med några nyare versioner tydligen) med webbläsarappen som standardwebbläsare (till skillnad från Chrome). Tyvärr har webbläsarappen massor av buggar och inkonsekvenser med CSS i allmänhet.

Välj meny

På <select>element visar Android aktiewebbläsaren inte sidokontrollerna om det finns en border-radiusoch/eller bordertillämpas. (Se den här StackOverflow-frågan för mer information.) Använd kodavsnittet nedan för att ta bort den stötande CSS-en och återge den <select>som ett oformaterat element i Androids aktiewebbläsare. Användaragenten som sniffar undviker störningar i webbläsarna Chrome, Safari och Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Vill du se ett exempel? Kolla in den här JS Bin-demon .

Validatorer

För att ge bästa möjliga upplevelse till gamla och buggiga webbläsare använder Bootstrap CSS-webbläsarhack på flera ställen för att rikta speciell CSS till vissa webbläsarversioner för att komma runt buggar i själva webbläsarna. Dessa hack får förståeligt nog CSS-validerare att klaga på att de är ogiltiga. På ett par ställen använder vi också avancerade CSS-funktioner som ännu inte är helt standardiserade, men dessa används enbart för progressiv förbättring.

Dessa valideringsvarningar spelar ingen roll i praktiken eftersom den icke-hackiga delen av vår CSS valideras fullt ut och de hackiga delarna inte stör den korrekta funktionen av den icke-hackiga delen, varför vi medvetet ignorerar dessa varningar.

Våra HTML-dokument har också några triviala och oviktiga HTML-valideringsvarningar på grund av att vi inkluderade en lösning för en viss Firefox-bugg .