Ако прочетете тази в някои блог ... мислех, че е хубаво да каталогизирате това за бъдещото Ref .... също би могло да бъде важен въпрос за интервю, че ще попита някой ден ....
Напишете фрагмент на CSS, който ще покаже един абзац в синьо-стари браузъри, червено в по-новите браузъри, зелено в IE6 и черно в IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
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 ;}
Ако вече не са видели тези преди, да прочетете следните, както и
Както обикновено, един от многото странни проблеми с IE и този човек трябва да се нарежда в ТОП 10 на IE странности.
ПРОБЛЕМ ОТЧЕТ (Това беше моят проблем, може би имате подобни misbehaviors):
Имам много DIV е в страницата с клас "sectionhead", което не е нищо, но заглавието на раздел на страницата. Така че имам някои стил изглежда като това
. Sectionhead {шрифт с размер: 18px; фон: # cfcfcf; подложка: 5px;}
DIV е светло сив бар с черен текст. Какво се случва в IE е някои от тези заглавията на секциите са показани добре, но някои от тях са невидими, докато превъртате страницата или щракнете върху нещо на страницата и т.н. Понякога те са склонни да изчезне, когато щракнете върху "Alt" ключ, когато ви страница или да се движите с лента за превъртане. Те понякога изглежда да се появят отново, когато презареди (F5) на страницата. Аз кратък перфектно просто DIV с някакъв прост стил се държи БАД.
Какво би могло да доведе до такова хаотично поведение? Е! Честно казано, никаква идея!
Възможно решение:
Отново не, не ме питайте защо, но в много случаи този проблем може да изчезне, когато добавите позиция: в сравнение с погрешно поведение елементи стил, като този
. Sectionhead {шрифт с размер: 18px; фон: # cfcfcf; подложка: 5px; позиция: относителна}
Странни, но какво да кажа? Бог ме благослови от IE!
И да споделят с НАС, ако сте имали подобни проблеми.
Ако някога сте (или производството на един) вертикално меню с помощта на елементи от списък (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>
<[Изпитва] ->
Мнение 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
На няколко пъти, докато правите оформления на страници с на изскачащи дивизия / лайтбокса, / съвети и т.н. Ние се намира ситуации, в които под някаква форма Изберете обекти се случва да бъде в рамките на тези изскачащи отдели по дизайн и го показва чрез .... Гадост!!
Е! вие лесно може да се определи това чрез коригиране на 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 елементи, скриптове и главоболие. Използвал съм това решение, и ако имате нужда от помощ с тази опция, не да ме уведомите. Ще се радваме да помогнем!
Няколко месеца по-рано видяхме, как бихме могли да включват едно парче на CSS, които ще бъдат видими да IE6 единствено ( За вашата IES Само ). Има и други начини за постигане на това, както добре. Просто включва отделен CSS, специфични за вашата целева IE. това може да се постигне с това, което се нарича като условни коментари.
Условни коментари е начин за откриване на вида и версията на браузъра. Browser откриване се извършва, за да се гарантира, че съдържанието представи на браузъра специфичен. На Browser откриването може да се извършва с помощта на много и различни техники. Този метод има няколко предимства в сравнение с ранните методи, които включват стил превключване използва Javascript. За да се изброят важно малцина, ще бъде;
Как да правим това?
Направете нещо в IE 5 само
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Направете нещо в Всички т.е. версии
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Направете нещо в Всички т.е. версии новите, че IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
За повече условни vartiations, прочетете тази информация за MSDN:
За условния коментар
Ако сте били писмено CSS за време, вие ще трябва да изпитат онези времена, когато буквално издърпайте косата си, когато си на CSS оформления изглеждаше добре във всички нови браузъри (имам предвид браузъри по-късно от IE6), но IE 6 хвърля гневно избухване. Да се борите трудно да се настроите вашата CSS, но тя не работи ... Е! Опитайте Тези хакове ...
1. Подчертае рана:
По дефиниция, CSS 2.1 спецификацията позволява подчертаване ("_") в идентификатори на СГО. Но много браузъри все още изглежда да игнорира всякакви идентифицира продължи с един подчертават освен за IE. Бъг Това IE / функция, като по този начин се превръща в един много ясен начин за настройване на CSS свойства само за IES. Затова помнете, собственост на CSS, написана с подчертават от самото начало е видима за Internet Explorer (всички версии, но IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}Преглед на демонстрация на това подчертават хак
Също така, мин. височина хак за IE6 използва на този подчертават хак, проверете
2. Hash (#) рана: -
Както подчертават хак, това е твърде е IES oly, с добра разлика, собственост идентификатори, предхождани от номер на началото е видима за всички версии на IE, IE7 и е невидимо за всеки друг стандартен браузър.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
3. CSS само за IE6: -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}
Тези хакове изглежда небето изпратено, когато нищо друго не работи ... Ако някоя от тези хакове пести живота си някой ден, не забравяйте да се отнасяш с мен кафе :)
Имах този проблем, когато, ако сте имали Задържането на курсора събитие за разделение (DIV) и това разделение, по някаква причина трябва да бъде прозрачен (както в моя случай, който изисква да се покажат някои тагове над изображение на Задържането на курсора на това прозрачно разделение), т.е. не е успял да задейства Изследвай с мишката събитие (работеше добре във FireFox).
Опитвали няколко варианта ... много от които беше само отчаян опит да се събитие на огън в IE. Един от разумните, които мислех, че може да работи, е да зададете цвят на фона на разделението и непрозрачността на нула ... Е! удар работа!
Окончателното решение, което изглежда да работи и да не се нарушава функционалността, аз изисква е да се сложи един пиксел повтаря / прозрачен фоново изображение в това разделение
... Глупаво! но сега IE изглежда щастлива.
Просто ... За да коригирате този дисплей на проблемната употреба: инлайн.
div {float:left;margin:40px;display:inline;}
Ако имате флоатно елемент като DIV и поставите марж-надясно или марж ляво на този елемент, Internet Explorer 6.0 ще се удвои тази стойност марж, каша на HTML / CSS оформление. За да поправите това, просто добавете дисплей: инлайн, плаващ вашата стихия.
