Libatli le lisebelisoa
Ithute ka libatli le lisebelisoa, ho tloha mehleng ea kajeno ho isa ho tsa khale, tse tšehetsoang ke Bootstrap, ho kenyeletsoa quirks le liphoso tse tsebahalang bakeng sa e 'ngoe le e 'ngoe.
Bootstrap e ts'ehetsa likhatiso tsa morao-rao tse tsitsitseng tsa libatli tsohle tse kholo le sethala. Ho Windows, re tšehetsa Internet Explorer 10-11 / Microsoft Edge .
Libatli tse ling tse sebelisang mofuta oa morao-rao oa WebKit, Blink, kapa Gecko, ebang ke ka kotloloho kapa ka mokhoa oa API, ha li tšehetsoe ka ho hlaka. Leha ho le joalo, Bootstrap e lokela (maemong a mangata) ho bonts'a le ho sebetsa ka nepo le ho libatli tsena. Lintlha tse ling tse tobileng tsa tšehetso li fanoe ka tlase.
U ka fumana mefuta ea rona ea libatli tse tšehetsoeng le mefuta ea tsona ho ronapackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Re sebelisa Autoprefixer ho sebetsana le ts'ehetso e reriloeng ea sebatli ka li-prefixes tsa CSS, tse sebelisang Browserslist ho laola mefuta ena ea sebatli. Sheba litokomane tsa bona mabapi le mokhoa oa ho kenyelletsa lisebelisoa tsena mererong ea hau.
Ka kakaretso, Bootstrap e ts'ehetsa liphetolelo tsa morao-rao tsa sebatli se seng le se seng se seholo sa sethala. Hlokomela hore libatli tsa proxy (tse kang Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ha li tšehetsoe.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | E tšehelitsoe | E tšehelitsoe | N/A | Android v5.0+ tšehetsoa | E tšehelitsoe |
| iOS | E tšehelitsoe | E tšehelitsoe | E tšehelitsoe | N/A | E tšehelitsoe |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | E tšehelitsoe |
Ka mokhoa o ts'oanang, liphetolelo tsa morao-rao tsa li-browser tse ngata tsa desktop lia tšehetsoa.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | E tšehelitsoe | E tšehelitsoe | N/A | N/A | E tšehelitsoe | E tšehelitsoe |
| Windows | E tšehelitsoe | E tšehelitsoe | E tšehelitsoe, IE10+ | E tšehelitsoe | E tšehelitsoe | Ha e tšehetsoe |
Bakeng sa Firefox, ntle le tokollo ea morao-rao e tsitsitseng, re boetse re ts'ehetsa mofuta oa morao-rao oa Tokollo e Atolositsoeng ea Ts'ehetso (ESR) ea Firefox.
Ka mokhoa o sa reroang, Bootstrap e lokela ho shebahala le ho itšoara hantle ka ho lekaneng ho Chromium le Chrome bakeng sa Linux, Firefox bakeng sa Linux, le Internet Explorer 9, leha li sa tšehetsoe ka molao.
Bakeng sa lethathamo la tse ling tsa liphoso tsa sebatli tseo Bootstrap e tlamehang ho sebetsana le tsona, bona Wall of browser bugs .
Internet Explorer 10+ ea tšehetsoa; IE9 le tlase ha ho joalo. Ka kopo hlokomela hore lisebelisoa tse ling tsa CSS3 le likarolo tsa HTML5 ha li tšehetsoe ka botlalo ho IE10, kapa li hloka thepa e kentsoeng pele bakeng sa ts'ebetso e felletseng. Etela Na nka sebelisa… bakeng sa lintlha tse mabapi le tšehetso ea sebatli ea likarolo tsa CSS3 le HTML5.
Haeba o hloka tšehetso ea IE8-9, sebelisa Bootstrap 3. Ke mofuta o tsitsitseng ka ho fetisisa oa khoutu ea rona 'me e ntse e tšehetsoa ke sehlopha sa rona bakeng sa ho lokisa liphoso le ho fetola litokomane. Leha ho le joalo, ha ho na likarolo tse ncha tse tla eketsoa ho eona.
Ts'ehetso bakeng overflow: hidden;sa <body>element e na le moeli ho iOS le Android. Ho fihlela seo, ha o feta ka holimo kapa tlase ho modal ho e 'ngoe ea li-browser tsa lisebelisoa tseo, <body>litaba li tla qala ho tsamaea. Sheba Chrome bug #175502 (e tsitsitseng ho Chrome v40) le WebKit bug #153852 .
Ho tloha ka iOS 9.2, ha modal e ntse e butsoe, haeba ho ts'oaroa ha pele ha pontšo ea moqolo ho le ka har'a moeli oa mongolo <input>kapa a <textarea>, <body>litaba tse ka tlase ho modal li tla tsamaisoa ho fapana le modal ka boeona. Sheba WebKit bug #153856 .
The .dropdown-backdropelement ha e sebelisoe ho iOS ho nav ka lebaka la ho rarahana ha z-indexing. Kahoo, ho koala li-dropdown tsa li-navbar, u tlameha ho tobetsa ka ho toba ntho e theolelang (kapa ntho efe kapa efe e tla chesa ketsahalo ea ho tobetsa ho iOS ).
Ho ata ha leqephe ho fana ka li-artifact likarolong tse ling, ka bobeli ho Bootstrap le web kaofela. Ho ipapisitse le bothata, re ka khona ho e lokisa (batla pele ebe u bula bothata haeba ho hlokahala). Leha ho le joalo, re tloaetse ho iphapanyetsa tsena kaha hangata ha li na tharollo e tobileng ntle le li-workaround tse qhekellang.
Le :hoverha ho sa khonehe ho lisebelisoa tse ngata tsa ho ama, iOS e etsisa boits'oaro bona, e fellang ka mekhoa e "khomarellang" e phehellang kamora ho tlanya ntho e le 'ngoe. Mefuta ena ea hover e tlosoa feela ha basebelisi ba tlanya ntho e 'ngoe. Boitšoaro bona bo nkoa bo sa lakatsehe 'me bo bonahala e se bothata ho lisebelisoa tsa Android kapa Windows.
Nakong ea likhatiso tsa rona tsa v4 tsa alpha le beta, re kenyelelitse khoutu e sa fellang le ho fana ka maikutlo bakeng sa ho kena potsong ea mecha ea litaba e ka thibelang mekhoa ea hover ho sebatli sa sesebelisoa se etsisang hovering. Mosebetsi ona ha o so ka oa phethoa kapa oa nolofalloa ka botlalo, empa ho qoba ho robeha ka ho felletseng, re khethile ho nyenyefatsa shim ena le ho boloka li-mixins joalo ka likhutšoane tsa litlelase tsa pseudo.
Esita le ho li-browser tse ling tsa morao-rao, khatiso e ka ba quirky.
Ha e le Safari v8.0, tšebeliso ea sehlopha sa bophara bo tsitsitseng e .containerka etsa hore Safari e sebelise boholo bo bonyenyane bo sa tloaelehang ha e hatisa. Sheba khatiso #14868 le WebKit bug #138192 bakeng sa lintlha tse ling. E 'ngoe ea tharollo e ka bang teng ke CSS e latelang:
@media print {
.container {
width: auto;
}
}Ka ntle ho lebokose, Android 4.1 (esita le tse ling tse ncha ho bonahala) e tsamaisana le sesebelisoa sa Browser e le sebatli sa marang-rang sa khetho (ho fapana le Chrome). Ka bomalimabe, sesebelisoa sa Browser se na le liphoso tse ngata le ho se lumellane le CSS ka kakaretso.
Ho <select>likarolo, sebatli sa stock sa Android se ke ke sa bonts'a li-control tsa lehlakore haeba ho na border-radiusle / kapa borderho sebelisoa. (Sheba potso ena ea StackOverflow bakeng sa lintlha tse ling.) Sebelisa tlhahiso e nyane ea khoutu e ka tlase ho tlosa CSS e khopisang le ho fana ka <select>ntho e sa tloaelehang ho sebatli sa stock sa Android. Ho fofonela ha basebelisi ho qoba ho kena-kenana le libatli tsa Chrome, Safari, le 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>U batla ho bona mohlala? Sheba setšoantšo sena sa JS Bin.
E le ho fana ka phihlelo e molemo ka ho fetisisa ho libatli tsa khale le li-buggy, Bootstrap e sebelisa li-hacks tsa CSS libakeng tse 'maloa ho lebisa CSS e khethehileng liphetolelong tse itseng tsa sebatli e le ho sebetsana le likokoana-hloko ho libatli ka botsona. Ka ho utloahalang, li-hacks tsena li etsa hore bahlahisi ba CSS ba tletlebe ka hore ha ba sebetse. Libakeng tse 'maloa, re boetse re sebelisa likarolo tsa CSS tse e-s'o be le maemo ka botlalo, empa li sebelisoa molemong oa ntlafatso e tsoelang pele.
Litemoso tsena tsa netefatso ha li na taba ts'ebetsong kaha karolo eo e seng ea bosholu ea CSS ea rona e netefatsa ka botlalo mme likarolo tsa bosholu ha li kena-kenane le ts'ebetso e nepahetseng ea karolo eo e seng ea bosholu, ke ka lebaka leo re hlokomolohang litemoso tsena ka boomo.
Litokomane tsa rona tsa HTML le tsona li na le litemoso tse sa reng letho le tse sa hlokahaleng tsa netefatso ea HTML ka lebaka la ho kenyelletsa ha rona mokhoa oa ho lokisa phoso e itseng ea Firefox .