Source

Pūtirotiro me nga taputapu

Akohia mo nga kaitirotiro me nga taputapu, mai i nga wa hou ki nga tawhito, e tautokohia ana e Bootstrap, tae atu ki nga ahuatanga me nga pepeke mo ia tangata.

Kaitirotiro tautoko

Ka tautokohia e Bootstrap nga putanga hou, pumau o nga kaitirotiro me nga papaaho nui katoa. I Windows, ka tautoko matou i te Internet Explorer 10-11 / Microsoft Edge .

Ko nga kaitirotiro rereke e whakamahi ana i te putanga hou o WebKit, Blink, Gecko ranei, ahakoa tika, ma te API tirohanga paetukutuku ranei, kaore e tino tautokona. Heoi, me whakaatu me te mahi tika a Bootstrap (i te nuinga o nga wa) i roto i enei kaitirotiro. Kei raro nei nga korero tautoko motuhake.

Ka kitea e koe a maatau momo tirotiro me o raatau putanga i roto i ta maataupackage.json :

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

Ka whakamahi matou i te Autoprefixer ki te hapai i te tautoko tirotiro ma te CSS prefix, e whakamahi ana i te Rarangi Tirotiro hei whakahaere i enei putanga tirotiro. Tirohia o raatau tuhinga mo te whakauru i enei taputapu ki o kaupapa.

Nga taputapu pūkoro

Ko te tikanga, kei te tautoko a Bootstrap i nga putanga hou o nga kaitirotiro taunoa o ia turanga matua. Kia mahara ko nga kaitirotiro takawaenga (penei i te Opera Mini, te aratau Turbo o Opera Mobile, UC Browser Mini, Amazon Silk) kaore i te tautokohia.

Chrome Firefox Safari Pūtirotiro Android me te Tirohanga Tukutuku Microsoft Edge
Android Tautokohia Tautokohia N/A Android v5.0+ tautokona Tautokohia
iOS Tautokohia Tautokohia Tautokohia N/A Tautokohia
Windows 10 Pūkoro N/A N/A N/A N/A Tautokohia

Pūtirotiro papamahi

Waihoki, kei te tautokohia nga putanga hou o te nuinga o nga kaitirotiro papamahi.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Tautokohia Tautokohia N/A N/A Tautokohia Tautokohia
Matapihi Tautokohia Tautokohia Tautokohia, IE10+ Tautokohia Tautokohia Kaore i te tautokona

Mo Firefox, i tua atu i te tukunga pumau hou, ka tautokohia e matou te putanga hou o te Whakaputa Tautoko Whakaroa (ESR) o Firefox.

Ma te kore mana, me titiro pai a Bootstrap ki Chromium me Chrome mo Linux, Firefox mo Linux, me Internet Explorer 9, ahakoa kaore i te tautoko mana.

Mo te rarangi o etahi o nga pepeke tirotiro e tika ana a Bootstrap, tirohia ta maatau pakitara o nga pepeke tirotiro .

Internet Explorer

Kei te tautokohia a Internet Explorer 10+; Ko te IE9 me raro kaore. Kia mohio koe ko etahi o nga taonga CSS3 me nga huānga HTML5 kaore i te tino tautokona i IE10, me hiahia ranei nga waahanga kua tohua mo te mahi katoa. Tirohia Ka taea e au te whakamahi… mo nga korero mo te tautoko tirotiro mo nga ahuatanga CSS3 me HTML5.

Mena ka hiahia koe ki te tautoko IE8-9, whakamahia te Bootstrap 3. Koinei te putanga tino pumau o to maatau waehere, kei te tautokohia tonutia e to taatau roopu mo nga whakatikatika bug tino nui me nga huringa tuhinga. Heoi, karekau he ahuatanga hou ka taapiri atu ki a ia.

Momo me te takaiho i runga waea pūkoro

Te waipuke me te panuku

Ko te tautoko mo overflow: hidden;te <body>huānga he iti noa i roto i te iOS me te Android. Ki tera mutunga, ka panuku koe i te taha ki runga, ki raro ranei o te aratau i roto i tetahi o nga kaitirotiro o aua taputapu, <body>ka timata nga korero ki te panuku. Tirohia te pepeha Chrome #175502 (kua mau ki te Chrome v40) me te bug WebKit #153852 .

iOS mara kuputuhi me te panuku

Mai i te iOS 9.2, i te wa e tuwhera ana te aratau, mena ko te pa tuatahi o te tohu panuku kei roto i te rohe o te tuhinga <input>, o te <textarea>, ko nga <body>ihirangi kei raro i te aratau ka panuku hei utu mo te aratau ake. Tirohia te bug WebKit #153856 .

Karekau te .dropdown-backdrophuānga e whakamahia ki runga iOS i te nav na te uaua o te tohu-z. No reira, ki te kati i nga takaiho i roto i nga pae whakaterenga, me paato tika koe i te huānga takaiho ( tetahi atu huānga ranei ka puhipuhi i te takahanga paato i iOS ).

Topa Pūtirotiro

Ko te topa o te wharangi ka whakaatu i nga mahi toi i etahi waahanga, kei Bootstrap me era atu o te paetukutuku. I runga i te take, ka taea pea e taatau te whakatika (rapu tuatahi ka whakatuwherahia he take mena e tika ana). Heoi, ka warewarehia e matou enei na te mea he maha nga wa kaore he otinga tika i tua atu i nga mahi hacky.

Piripiri :hover/ :focuskei runga iOS

Ahakoa :hoverkaore e taea i runga i te nuinga o nga taputapu pa, ka peehia e iOS tenei whanonga, ka puta he ahua "piri" ka mau tonu i muri i te paato i tetahi huānga. Ka tangohia enei momo whakaparo ka paopao nga kaiwhakamahi ki tetahi atu huānga. Ko tenei whanonga e kiia ana he kino te ahua me te ahua kaore he take i runga i nga taputapu Android, Windows ranei.

I roto i a maatau putanga v4 alpha me te beta, i whakaurua e matou he waehere kaore i oti me te korero mo te whakauru ki roto i te uira patai pāpāho ka whakakore i nga momo whakaparo i roto i nga kaitirotiro taputapu pa e whai ana i te toronga. Ko tenei mahi kaore i tino oti, i whakahohea ranei, engari kia kore e pakaru katoa, kua whiriwhiria e matou ki te whakakore i tenei tohu me te pupuri i nga whakauru hei pokatata mo nga karaehe pseudo.

Te tā

Ahakoa i roto i etahi kaitirotiro hou, he rereke te tuhi.

Mai i te Safari v8.0, .containerka taea e Safari te whakamahi i te karaehe whanui-whanui ka whakamahi a Safari i te rahi momotuhi iti i te wa e ta ana. Tirohia te take #14868 me WebKit bug #138192 mo etahi atu korero. Ko tetahi o nga mahi ka taea ko te CSS e whai ake nei:

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

Pūtirotiro kararehe Android

I waho o te pouaka, ka tukuna a Android 4.1 (me etahi o nga putanga hou) me te taupānga Tirotiro hei kaitirotiro paetukutuku taunoa (he rereke ki a Chrome). Kia aroha mai, he maha nga pepeke me nga rerekee ki te CSS i te nuinga o te waa.

Tīpakohia te tahua

I runga <select>i nga huānga, kaore te kaitirotiro kararehe Android e whakaatu i nga mana taha mena he tono border-radiusme te / ranei border. (Tirohia tenei patai StackOverflow mo nga taipitopito.) Whakamahia te mahanga o te waehere i raro nei hei tango i te CSS kino me te <select>whakaputa i te huānga kore-ahua i runga i te tirotiro kararehe Android. Ko te hongi a te kaihoko kaiwhakamahi ka karo i te pokanoa ki nga kaitirotiro Chrome, Safari, me 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>

Kei te hiahia koe ki te kite i tetahi tauira? Tirohia tenei whakaaturanga JS Bin.

Kaiwhakamana

Hei whakarato i te wheako tino pai ki nga kaitirotiro tawhito me nga kaitirotiro, ka whakamahi a Bootstrap i nga hacks tirotiro tirotiro CSS i nga waahi maha ki te aro ki te CSS motuhake ki etahi putanga tirotiro kia pai ai te mahi i nga pepeke i roto i nga kaitirotiro ake. Ko enei hacks ka tino amuamu nga kaiwhakamana CSS he muhu. I etahi waahi takirua, ka whakamahia ano e matou nga ahuatanga CSS whakaheke toto kaore ano kia tino paerewahia, engari ka whakamahia noa enei mo te whakapai haere.

Ko enei whakatupato whakamana karekau he aha i roto i nga mahi na te mea ko te waahanga kore-hacky o to tatou CSS ka tino whakamana, karekau hoki nga wahanga hacky e pokanoa ki te mahi tika o te wahanga kore-hacky, no reira he aha tatou ka aro ki enei whakatupato.

Kei a maatau tuhinga HTML etahi whakatupatotanga whakamana HTML iti me te kore whai hua na te whakaurunga o te mahi whakatika mo tetahi bug Firefox .