Рамкі без рам
Уводзіны
Слова перасцярогі
Гэты метад не працуе ў IE6 пры вызначаных акалічнасцях – калі ласка, гледзіце частку сумяшчальнасці для атрымання дадатковай інфармацыі.
Агляд
Гэта серыя старонак прадэманстраваць, якім чынам узнавіць усё дабро кадраў з не кадр тэг у поле зроку. Крыніцай для Вашага элементы могуць быць як семантычна і педантычна лагічных, як вы жадаеце і вы можаце выкарыстоўваць пікселяў, EMS ці адсоткі, каб усталяваць іх. У сутнасці, гэты метад імітуе фіксаванае пазіцыянаванне, а таксама камбінацыя верхняга і ніжняга, левага і правага ўласцівасцяў у IE, які, як любы дурань ведае, пабіты пры звычайных умовах.
Так, так, я ведаю – вы жадаеце, каб дабрацца да вашывы пяшчаны, фактычныя рамкі без рамкі рэчы. Проста мядзведзь са мной, хоць. Гэта старонка ўтрымоўвае тлумачэнне таго, як гэты метад развіваўся, палавіністым “А вось частка навукі”, а таксама разбіўка якіх браўзары гэта бяспечна выкарыстоўваць гэты метад.
Натхненне
Я быў knuckling уніз, каб усё спявалі, усе танцы дэма выкладаў цудаў Eric Bednarz у здань у поле ўзламаць, паколькі пытанне “Як я магу вырабляць кадраў тыпу прыводзіць да CSS?” з’яўляецца найболей часта задаваныя пытанні пра CSS-абмеркаванне, калі я натыкнуўся на 2002 дэма Edwardson Tan (Слупкі галактык), якія пайшлі доўгі шлях для дасягнення такой жа эфект, але з абсалютным пазіцыянаваннем DIV-ы. Як я ўжо вычарпалі кодэкса Edwardson, я ўспомніў Sven Tofte у наватарскай макс шырыня выраза ў IE, і раптам я ўбачыў святло. На гэтых старонках, з’яўляюцца вынікам таго шчаслівага параўнання.
Рамкі
Ах, так. Вось і навукі часткі.
XML-пралог (гэта смешна гледзячы тэгі на самым верху – <?xml version=”1.0″ encoding=”iso-8859-1″?>) Неабходна для IE6 для карэктнага адлюстравання – гэта можа быць магчымым абыйсціся без яе але я не магу важдацца, каб зразумець, што з [1]. Гэта азначае, што IE6 працуе ў рэжыме сумяшчальнасці. На яркім боку, хоць гэта азначае, што няма неабходнасці карміць розных значэнняў розных версіях IE. (Дзіўна, калі гэтыя ж метады ўжываюцца для здані ў акне Спосаб, мы павінны быць у стандартным рэжыме і таму павінны пакінуць пралог выйсце).
Усе элементы, якія будуць выступаць у якасці кадраў (у гэтых прыкладах усе яны надзейныя DIV-ы) павінна быць абсалютным пазіцыянаваннем і іх перапаўненні маёмасці ўсталяваны ў аўта (калі вы не ведаеце, што ўтрыманне гэтага элемента не будзе перавышаць памер элемента).
Наступная рэч усталяваны набор autoflow арганізма на ўтоеныя – зараз абсалютным пазіцыянаваннем элементаў будзе заставацца на месцы трывала, як быццам яны павінны былі быць выпраўлены. Пакуль усё добра і не вельмі моцна адрозніваецца ад дэма, згаданых у натхненне рэкламная аб’ява.
Хітрасць складаецца ў выкарыстанні верхняй і ніжняй, правай і левай уласцівасці ў спалучэнні – сучасныя браўзары проста зрабіць правільны выбар і разабрацца ў вышыню аўтаматычна. Гэта сапраўды так проста.
Акрамя гэта не так. Гэта не працуе ў IE – калі ў верхняй ці левай наладзіць уласцівасці, то знізу і справа адпаведна ўласцівасці ігнаруюцца.
Рэальны трук (у дадатак да ўжо згадвалася 1) складаецца ў выкарыстанні дынамічных уласцівасцяў, ён жа выразы.
“Але, вядома,”Вы пратэсту”, выраза не правярае?” Вы правы, – але нішто не перашкодзіць нам паставіць селектар ці адпаведных стыляў заявы ва ўмоўных каментароў у IE. Дык вось менавіта тое, што мы робім.
Давайце разгледзім просты прыклад. Калі ў нас ёсць div#foo і жадаем, каб ён 200 пікселяў, быць размешчаны ў верхнім левым куце і пабегчы ўвесь левы бок на дно, тая наступная заява тое, што трэба для ‘новага часу’:
#foo
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
overflow: auto;
}
Зараз нам трэба дадаць наступную заяву, што толькі версіі PC у IE можна ўбачыць:
#foo
{
height: expression(document.body.clientHeight + “px”);
}
document.body.clientHeight гэта вышыня акна праекцыі, так, што мы які робіцца кажа IE у становішча Div у самай верхняй частцы акна праекцыі і зрабіць яго высокі, як праекцыі.
Даволі проста, так? Але як наконт div#bar, што мы жадаем, каб ахапіць 50 пікселяў зверху 100 пікселяў з дна, а з 75 пікселяў злева для 150 пікселяў на гэта права? Гэта наша кропка адліку:
#bar
{
position: absolute;
top: 50px;
bottom: 100px;
left: 75px;
right: 150px;
overflow: auto;
}
Ізноў мы павінны дадаць дадатковую дэкларацыю, што толькі версіі ПК IE для прагляду:
#bar
{
height: expression(document.body.clientHeight - (50 + 100) + "px");
width: expression(document.body.clientWidth - (75 + 150) + "px");
}
Гэта значыць, вышыня роўная вышыні ў краявідным мінус верхняй і ніжняй значэнні сумуюцца. Шырыня працы сапраўды гэтак жа, але з левай і правай значэння адымаецца з шырыні краявіднага акна. (Вядома, можна напісаць 50 + 100 да 150 – Я толькі што зрабіў гэта такім чынам, каб зрабіць яго відавочным тое, што адбываецца)
IE5 Mac праблемы дзіцяці Разам з тым (і асабіста мой выбар за ўзнагароду новага Netscape 4), паколькі яна робіць правільны стары хэш перапаўнення пры вызначаную вышыню не быў усталяваны. Выпраўленне адносна трывіяльная, хоць – бы старонка традыцыйнай бесперапыннай прагорткі для IE5 Mac шляхам прыгнечання перапаўнення арганізма: утоеныя і не зусім пазіцыянаванні #content ці #footer. Вывучыце код – вы ўбачыце, што я маю на ўвазе.
На наступных старонках вы ўбачыце, як выкарыстоўваць EMS і адсоткі якасці адзінкі выбар, калі Вы пажадаеце. Вы таксама ўбачыце, як мы можам затым ізноў урокі тут, каб традыцыйныя здань у поле ўзламаць і вярнуць юзабіліті кропкі страцілі ў абсалютна пазіцыянуецца метад, але, не будзе вам вядома, губляе некаторыя іншыя ў гэтым працэсе.
“Кадры”, як правіла, прабелаў паміж імі, каб паказаць больш ясна, як менавіта яны размешчаны, але фрагменты вышэй усёй угоды. Гэта сапраўды так проста.
Сумяшчальнасць
Працуе ў IE6 (але гл. ніжэй), IE5.5, IE5.01, Firefox 0.8, Mozilla 1.6, Safari 1.1, Opera 7.23, Opera 7.5.
З-за праблем з тым, як інтэрпрэтуе IE5 Mac вышыні, гэтыя дэма-старонак, галоўным чынам, узламалі, каб Mac IE5 паводзіць сябе як звычайны бесперапыннай прагорткі старонкі.
Оперы 5 і 6 з трэскам праваліліся (акрамя фіксаваных версій), але CSS можна лёгка скарэктаваць, каб яны паводзяць сябе гэтак жа, як Mac IE5. Ці не так, як ад пэўнага выпадку.
IE6 сумяшчальнасць пад XP2
Больш сур’ёзна, гэты метад пайшоў ад рок цвёрдага значна меней уражлівым станы толькі верагодна, будзе працаваць у IE6. Калі Microsoft выпусціла XP2, ён мадэрнізаваў IE6 JavaScript, каб выразы ў CSS, не выконваюцца, калі і толькі тады, калі зона, якая знаходзіцца ўсярэдзіне старонкі бяспекі мае значэнне ‘High’. У большасці версій IE6 параметры бяспекі для зоны Інтэрнэту ўсталяваны ў “сярэдніх” і таму гэты метад будзе працягваць працаваць для большасці карыстачоў з IE6. Тым не менш, калі вы не можаце гарантаваць, што вашы карыстачы бяспекі не будзе ‘High’ (напрыклад ваш сайт размешчаны ў давераную зону), ці калі вы не пярэчыце, што некаторыя карыстачы (па ўсёй бачнасці, людзі за карпаратыўны міжсеткавы экран) будзе Не знайшлі ваш сайт, як вы жадалі, я не магу рэкамендаваць выкарыстанне гэтага метаду. чыстай ‘A’ JavaScript метаду, напрыклад, Andrew Clover у fixed.js, верагодна, будзе лепшым рашэннем.
Стандартным рэжыме сумяшчальнасці IE 6
Насамрэч я ўспомніў, што я ведаў, як выправіць гэта для IE6 у стандартным рэжыме ўвесь час. Як я дагэтуль не знайшоў час уключыць гэтыя веды ў гэтым артыкуле, я прыляпіць яе тут у якасці дадання.
Некалькі больш складаны выраз, калі патрабуецца, бо IE6 у стандартным рэжыме, document.body.clientHeight вяртае 0, і вы павінны выкарыстоўваць замест document.documentElement.clientHeight (сітуацыя зменіцца ў рэжыме сумяшчальнасці). Вядома, меншай версіі IE не вяртаюць значэнне, што так, што трэба выкарыстоўваць гэты ўмоўны выраз, як:
(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)
Прыклад гэтага можна ўбачыць на гэтым скарэктаваны варыянт асноўнага макета
Акрамя таго, Leif Olsen распавяла мне яшчэ адзін спосаб атрымаць IE6 для карэктнага адлюстравання ў стандартным рэжыме.
Проста дадайце ” body { height: 100%; } ” у ваш CSS. Акрамя таго, вы павінны падаць новы дух у поле выраза IE6
Я не спрабаваў гэта сам, паколькі я не лічу яго выраз занадта страшна, але для тых, хто, я падумаў, што варта згадаць.
