2009 Nov 7 2009

CSS ZOOM - Още една приумица на IE; 3 Пикселно изместване

Час и отново, Когато всички други браузъри, виждал да се държат, както е казано от правилата на W3C, т.е. вие излязло от развитието на духа чрез хвърляне гневно избухване, това не изглежда да има корекция. Точно такъв човек е този въпрос в IE7.

Проблем изявление:
Аз и това може да сте забелязали, много от другите сериозни уеб разработчици повече от много пъти, че когато има вложени плува в оформлението, за Задръжте показалеца върху някои връзки (ANCHOR тагове), съдържащо контейнер изглежда да се пренастрои на няколко пиксела надясно . Аз се опитах решения на Google за този въпрос, но едва ли са намерили всеки разумен отговор защо и когато това се случи (което може да помогне да се предотврати този проблем да се случи), следователно аз никога не са намерили ясно решение на проблема или ...

Възможно решение:
На опит, имам предизвестие 90% на времето, т.е., че този въпрос е определена от добавяне на увеличение имоти в CSS определението на погрешно поведение контейнер ...

 # Somediv {
       увеличение: 1;
 }

отново причините са двусмислени ... Опитайте това ...
Някои елементи в IE "hasLayout" имот, който по подразбиране е "истинска". Много визуални поведение на CSS, например алфа филтър работи само върху един елемент, която hasLayout. {Zoom: 1} и изглежда да се даде на целевите елементи, hasLayout собственост .... Полезна? Аз не мисля така ...

Увеличение имот е също изглежда се поддържа от Chrome, но използването му удар изглежда да направи много по-неблагоприятен ефект върху моята оформление ... го опитате, ако тя работи за вас ... ако това не стане, Запомнете тази страница в "игра на зарове на CSS"


2009 Мар 22 2009

SevenUp! Насърчаване на света, за да се отървете от IE6!

Google стартира движение ред на хората да се отърват от IE6 ... С подслушвателни IE6 потребителите с изскачащ за зареждане на страницата ... не може да бъде много добра идея ... но е разработчик на UI, аз трябва да се присъединят към този вагон лента ... един по-малко браузър за мен се тревожат за ... За съжаление това е егоистично! но аз съм този Javascript ... (опитайте тази страница в IE6) ...
Хей! и по-светло бележка ... Вижте, това е проява на силата на JavaScript .... тя дори може да свали гигант (или след като е)

Така че ... помощ се отърве от света на IE6 с по една линия на JavaScript!

http://code.google.com/p/sevenup/


2008 Dec 17 2008

Погрешно поведение IE8: CSS оформление счупвания (насочване версия на браузъра с помощта на мета таговете в IE8)

Ако сте CSS човек, вие ще разберете болката в получаване на вашите оформления работни кръстосано браузър. IE8 е още един гаечен ключ в работите за нас, разработчиците. Anywaz! ако ви удари по този въпрос, както аз направих вчера, където перфектно работи CSS в IE7 (и по-рано) и Firefox изведнъж започна да разхвърляне в IE8, опитайте това ... Това добре ли да се определят проблемите ми в момента ....

Използването на Мета декларация, ние можем да определи оказване на двигателя, бихме искали IE8 да се използва. Така че, за да накара IE8 да се направи като IE7 ... Поставете следния мета тагове в главата на вашия документ:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

По подразбиране IE Мета ще бъде: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
което би направило IE8 правят страница с помощта на новия режим на стандарти.

Ако е необходимо, този синтаксис може да се използва за настаняване на други браузъри, както по-долу:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />


Повече За DOCTYPES:

Ако сте все още непознат с вид на животно, наречено "DOCTYPE" ... ето някои бързи прочетете
Какви са DOCTYPES? Какви са Браузър странности и ПЪЛНА режим?
Настройка на DOCTYPE в XSL

За по-задълбочено разбиране за DOCTYPES, опитайте да посетите тези връзки ...
A List Apart: да се определи вашия сайт с десния DOCTYPE!
A List Apart: Отвъд DOCTYPE: Уеб стандарти, Forward съвместимост и IE8

Забележка: Въпреки, че много от нас HTML / CSS хора са се пренебрегва значението на DOCTYPE decleration, в нашите документи, създаването на правилните DOCTYPE, обикновено е отговорът на по-голямата част от трансграничните проблеми на браузъра.


2008 Окт 10 2008 г.

За т.е. само - CSS селектори деца не се работи в IE

CSS за не-IE браузъри: Няма новини за разработчиците на CSS, CSS деца селектори като примера по-долу, не изглежда да работи в IE.

например div> педя {някои CSS}, това означава, че "когато една педя елемент е дете (и не внук или голямо Гранд дете и др.) на разделение елемент".

Но ние използвахме този контекст в наша полза. Исторически погледнато, селекторът на детето е бил използван, за да скриете CSS команди от IE. Просто чрез поставяне на html>body в предната част на всяка CSS команда IE ще го игнорира:

html>body .foo { CSS commands go here ;}

Това работи, защото <body> винаги е дете на <html> може да разбира се никога не е внук или правнук на <html> .

Сега, че IE 7 разбира селектора на детето, трябва да поставите празен етикет за коментар директно след повече от знак за IE 7 не ще разбере този селектор (кой знае защо!?) И следователно ще напълно игнорира тази команда CSS.:

html> /**/ body .foo { CSS commands go here ;}

Ако вече не са видели тези преди, да прочетете следните, както и


2008 Окт 4 2008

Изчезване HTML / DIV елементи в Internet Explorer [IE]

Както обикновено, един от многото странни проблеми с IE и този човек трябва да се нарежда в ТОП 10 на IE странности.

ПРОБЛЕМ ОТЧЕТ (Това беше моят проблем, може би имате подобни misbehaviors):
Имам много DIV е в страницата с клас "sectionhead", което не е нищо, но заглавието на раздел на страницата. Така че имам някои стил изглежда като това

. Sectionhead {шрифт с размер: 18px; фон: # cfcfcf; подложка: 5px;}

DIV е светло сив бар с черен текст. Какво се случва в IE е някои от тези заглавията на секциите са показани добре, но някои от тях са невидими, докато превъртате страницата или щракнете върху нещо на страницата и т.н. Понякога те са склонни да изчезне, когато щракнете върху "Alt" ключ, когато ви страница или да се движите с лента за превъртане. Те понякога изглежда да се появят отново, когато презареди (F5) на страницата. Аз кратък перфектно просто DIV с някакъв прост стил се държи БАД.
Какво би могло да доведе до такова хаотично поведение? Е! Честно казано, никаква идея!

Възможно решение:
Отново не, не ме питайте защо, но в много случаи този проблем може да изчезне, когато добавите позиция: в сравнение с погрешно поведение елементи стил, като този

. Sectionhead {шрифт с размер: 18px; фон: # cfcfcf; подложка: 5px; позиция: относителна}

Странни, но какво да кажа? Бог ме благослови от IE!

И да споделят с НАС, ако сте имали подобни проблеми.


2008 Jul 15 2008 г.

IE 8 строг режим и CSS непрозрачност ... работят около

Е, добре! По-рано след няколко дни по отношение на Opacity в IE8, аз забравих да спомена един важен момент, че "IE 8 строг режим не позволява за CSS непрозрачности".
За тези, които donot разберете какво имам предвид от строг режим, тук е бърз урок .

Работа около това (преди IE екип Дев осъзнават, че имат проправи пътя за работа в практиката по целия свят, за уеб-сайтове използващи на изскачащи лайтбокса с известна непрозрачност и пуснат отново подкрепа за Opacity) е да се използва полупрозрачни образ ... за предпочитане във формат PNG (имах лош опит, получаване на прозрачни изображения GIF, за да работят, тъй като те би трябвало да). Създаване на PNG изображение на цвета и процент на прозрачност ви харесва, във вас любим редактор на изображението и да го използвате като фоново изображение за вашия Лайтбокс наслагване.

т.е.
Вместо нещо подобно

. Lighbox_overlay {
фон-цвят: # FFFFFF;
Z-индекс: 1001;
-Moz-непрозрачност: 0,6;
непрозрачност: 0,60;
филтър: алфа (Opacity = 60);
}

Направете това ....

. Lighbox_overlay {
фон: URL (bkg.png) повторение;
}

Да го изпробвате, натиснете тук! | изтеглянето, щракнете ТУК!


2008 Jul 6 2008 г.

Не "Opacity" в IE8

Ако разглеждате тази страница в IE8, тогава трябва да се видим пълен непрозрачен бял фон зад този пост. Вчера, моя колега изтъкна това за мен (Тъй като съм един от онези хора, които се адаптират към промените бавно и равномерно ... особено браузъри. Може да се каже, съм страхливец, но така да бъде .... Да бъдеш един разработчик UI, винаги съм страх лайна на нови версии на браузъра ... знаете какво УИ, tlaking за, нали?)

Изкопа около докато се опитва да намери решение да се поправи и след това какво ...
Този път всички времена Любими браузър го е направил всичко отново чрез отпадане на всички подкрепа за непрозрачност на CSS. Нестандартно "филтър: алфа (непрозрачност = # #)" CSS атрибут е била отстранена, Ница, но те също напълно забравих да добавите CSS3 непрозрачност подкрепа (например, как всичко на друг браузър е приятно да го съхраняват в). Така, за първи път, тъй като Бог ни разказа за непрозрачност на CSS (от IE 5.0, предполагам), уеб браузър не поддържа CSS непрозрачност.
И сега за крема на върха: Официален дума от IE 8 отбор? Това е "още при проектирането" и "ние ще разгледаме това в бъдещата версия на IE".

PS: Опитайте тази страница в FF, кълна се, изглежда чист!


2008 20 юни 2008 г.

Бяло пространство за грешки в линия / Списък на елементите (LI) в IE6

Ако някога сте (или производството на един) вертикално меню с помощта на елементи от списък (LI) тагове и CSS, които може да срещнете, това още един бъг в Internet Explorer, където IE 6 вмъква тези пропуски между елементите на списъка, които съдържат блокови елементи ниво, т.е. ако има празни пространства между елементите на списъка в маркиране. Благодаря, но Не, благодаря, версията на IE 7 изглежда от тази грешка.
Ако като мен, и още много други, които принадлежат към тази група от разочарованите разработчици, които все още имат да получат своите нови оформления, работещи в IE6, то това може да се окаже полезно. Да разгледаме по ...

Проба за маркиране:

<ul id="menu">
<li> <a href="#"> Начална страница </ A> </ li>
<li> <a href="#"> За нас </ A> </ li>
<li> <a href="#"> Услуги </ A> </ li>
<li> <a href="#"> Портфолио </ A> </ li>
<li> <a href="#"> Често задавани въпроси </ A> </ li>
<li> <a href="#"> Свържете се с нас </ A> </ li>
</ UL>

Можете да създадете някои CSS, подобен на този по-долу, за да transfrom над маркиране в едно вертикално меню ....

Примерен CSS ...
# Меню {
марж: 0; подложка: 0; фон: # FF9900;
Списъкът стил тип: няма; ширина: 150px;
}
# Меню Ли {марж: 0; подложка: 0;}
# Меню {дисплей: блок;
цвят: # 555555;
текстови декорация: няма;
подложка: 0 15px;
линия-височина: 2,5; дъно граници: 1px солидна # FFF;
}

Резултатите, ще видиш ...
нула

Разтвор за този бъг ... (промяна / добавен CSS в получер курсив)

# Меню {
марж: 0; подложка: 0; фон: # FF9900; списъка стил тип: няма; ширина: 150px;
поплавъка: ляво; / * това съдържа сключило елементи от списъка * /
}
# Меню Ли {
марж: 0; подложка: 0;
поплавъка: ляво; / * Това поправки * /
ширина: 100%; / * празно бъг в IE6 * /
}
# Меню {
дисплей: блок; цвят: # 555555;
текстови декорация: няма;
подложка: 0 15px;
линия-височина: 2,5; дъно граници: 1px солидна # FFF;
}

Ако по-горе doesnot решение изглежда да работят (по причини, известни IE6 само) ... опитате този метод, вместо да

Просто добавете този допълнителен IE6 само стилове, за да ви маркиране ...

<- [Ако LT IE 7>
<style type="text/css">
# Меню Ли една {дисплей: инлайн блок;}
# Меню Ли една {дисплей: блок;}
</ STYLE>
<[Изпитва] ->


2008 12 април 2008 г.

CSS кръст Browser рана Минимална височина

Мнение IE 6, MSIE е бил така любезен да ни потребителския интерфейс на разработчиците, чрез добавяне на още няколко свойства на CSS стандарт за повечето други стандартни браузъри. Една такава полезна имот в "мин. височина". Доста чисти напред собственост, която не се нуждае от много раздухан обяснение. Когато мин височина за разделение е зададена, тя винаги запазва този набор на височина, когато съдържанието в нея се помещава заема по-малко, отколкото тя може да побере и важното (за разлика от обикновеното "височина", собственост) скали или по думите на СГО, тя се държи като разделянето, чиито "височина" е настроен на "AUTO" ...

За някои от нас, бедните предприемачи, които все още са необходими за код CSS, които трябва да работят в IE6, ООН наличието на "мин. височина", може да се окаже запушалка шоу някъде ... Donot отчаяние.

За щастие, имаме достатъчно странности в IE, че ние ще се използват за извън предимство и проникна нашия път до постигането на нашата цел ... т.е. направи разделение по споровете, като че мин височина в IE6

Решение 1: Използване на долна рана [ ... Прочети повече ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>


Решение 2: Използване на CSS атрибута Selector рана

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>

Атрибутът CSS селектор рана се възползва от факта, браузъри рано Tha IE6 игнорира едно atribute, селектора. Обърнете внимание на изискването за разделение с друг контейнер клас = "someclass". Само присъствие на класа атрибут за това разделение, има предимство над височината обратно към Коли Opera, Mozilla и MSIE7, и по-късно. IE6, който не подкрепа на atribute селектори, го игнорира.

Преглед на Демо на мин. височина хак за IE6



2008 15 март 2008 г.

Дразни Изберете кутии, видими през появилото се отделения

На няколко пъти, докато правите оформления на страници с на изскачащи дивизия / лайтбокса, / съвети и т.н. Ние се намира ситуации, в които под някаква форма Изберете обекти се случва да бъде в рамките на тези изскачащи отдели по дизайн и го показва чрез .... Гадост!!

Е! вие лесно може да се определи това чрез коригиране на Z-стойности на индекса, подходящо за FF и IE7. Но Добрия стар (игра на думи, предназначени) IE6 не се държи по предназначение .... Изберете Покажи кутия, дори след прилагане на някои драстично високи Z-стойности на индекса на вашия изскачащи дивизия ... Кофти!!!

Има Няма определя за този проблем, но има, според мен, повече от няколко начин да работят около този проблем, но съм тук да ви кажа най-простото решение, че аз използвам, който работи добре за мен, в по-голямата част от случаи ....

"Скрий SELECT BOX НА ROUGE, когато вие покажете появилото се"

Просто в скрипта ви откъс, където ви покаже изскачащ прозорец, добавете част от сценария, за да укажете видимост на прозорец Избор на "скритата"

document.getElementById ("my_select") style.visibilty = "скрит".

И не забравяйте да го върна на тясно на изскачащи си дивизия

document.getElementById ("my_select") style.visibilty = "видими";

, "my_select" е ID на прозорец Избор на дразненето

Надявам се това да помогне ...

PS. Има разбира се и други опции, като динамично positionining на една IFRAME (същия размер като ви изскачащи) под Popup DIV ... Това работи добре, но с добавянето на купища от DOM елементи, скриптове и главоболие. Използвал съм това решение, и ако имате нужда от помощ с тази опция, не да ме уведомите. Ще се радваме да помогнем!


НДК начало | Изразявайки | Изразявайки Вкус | Изразявайки Penmenship | Изразявайки страхопочитание | Изразяване на себе си