IE6/IE7 Input Submit Box Model Дилема

Някакъв странен бъг, на който се натъкнах днес, когато създавах общ клас бутони за стилизиране на всичко от div до входове. Изглежда, че повечето браузъри използват различен модел на кутия, когато се свежда до input[type=submit].

Повечето съвременни браузъри (т.е. 9+, ff, chrome и т.н.) използват модела content-box box за всички входове, освен submit, който използва border-box, ако не греша.

По принцип, ако задам височина от 100 и подложка от 10 навсякъде, височината на всички входове, с изключение на изпращане, ще бъде 120, където височината на изпращане ще бъде 100.

Това лесно се поправя с помощта на оразмеряване на кутията и нейните префикси на браузъра. Но проблемът ми е с IE6/7, който прави същото, но не поддържа оразмеряване на кутия...

така че сега всички мои входове показват пълна височина с изключение на submit, който е нарязан наполовина. Какви опции имам, за да принудя content-box или друга корекция освен условните коментари?


html css pixel-perfect internet-explorer-7 internet-explorer-6
person Ozzy    schedule 20.10.2012    source източник
comment
FWIW, открих, че пътят на най-малкото съпротивление е задаване на всички входове на border-box във всички браузъри и след това добавяне на код за коригиране на IE 7 (макар че се съмнявам, че това е, което искахте да чуете).   -  person Tim Medora    schedule 20.10.2012
comment
Нямам нищо против да кодирам за content-box, както съм свикнал сега, и всичките ми дизайни са перфектни за кръстосани браузъри, това са само малки странни грешки, които ме ядосват. само преди минута имах грешка в IE7, при която долното поле на елемента се появяваше под следния елемент, както и самия него T_T   -  person Ozzy    schedule 20.10.2012
comment
Ако наистина ви е грижа толкова много за остарелите IE, няма по-добро решение от използването на условни коментари: ‹!--[if lt IE 8 ]› ‹html class=ie7› ‹![endif]--›   -  person Evgeny    schedule 31.10.2012
comment
след това просто използвайте .ieX клас за стилизиране, например: .button {/* нормални стилове /}, .ie7 .button {/ хакове, за да изглежда правилно на остарели IE */}   -  person Evgeny    schedule 31.10.2012
comment
Виждам, че сте маркирали въпроса pixel-perfect, но това сериозно изискване ли е? Използване на един и същ код във всички браузъри?? От прагматична гледна точка очевидният отговор е просто да приемем, че IE6/7 има проблеми; заобиколете го достатъчно, за да го направите използваем, но не губете твърде много време, за да го направите перфектен. Попитайте себе си (или шефа си) колко посетители използват IE6/7 за сайта и след колко време дори тези хора надграждат. Колко усилия оправдава отговорът на този въпрос? Ако изискването остане в сила след изтъкването на това, тогава имате моето съчувствие.   -  person Spudley    schedule 01.11.2012

Отговори (1)


arrow_upward
1
arrow_downward

Старият "счупен" модел на кутия на IE по същество е content-box. В IE>5 документът трябва да е в режим на особености, за да може IE да го използва. Можете да задействате режим на странности, като направите едно от следните (според wikipedia):

  • Когато декларацията за вида на документа липсва или е непълна;
  • Когато се срещне HTML 3 или по-ранен документ
  • Когато се използва декларация за тип документ HTML 4.0 Transitional или Frameset и не присъства системен идентификатор (URI)
  • Когато SGML коментар или друго неразпознато съдържание се появи преди декларацията за тип документ
  • Когато има грешки някъде в документа

Сега, разбира се, това вероятно създава повече проблеми, отколкото си струва, защото би накарало всичко да използва модела на кутията на IE (content-box). Виждам, че това е полезно, но ако оформлението ви не е изградено по този начин, вероятно е твърде много работа да се върнете и да го промените.

Направих малко търсене наоколо и не намерих нищо, което да активира стария модел на кутията на определени елементи, а не на други.

След като сте се занимавали с IE6/7 в миналото, наистина няма начин да заобиколите поведението му с грешки, без да използвате нещо като условни коментари или css хакове. Механизмът за изобразяване е просто фундаментално повреден в сравнение с други браузъри. Опитът да го накараш да се държи без никакви хакове означава просто главоболие.

Единственото друго нещо, което мога да измисля, е да оградя всеки елемент на формуляр със span или div и да ги използвам, за да оразмеря вашите елементи на формуляр. Това също е гадно, но има предимството поне да работи във всеки браузър.

person nynexman4464    schedule 31.10.2012