Изразяване на ИТ

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

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

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

Ако някога сте (или производството на един) вертикално меню с помощта на елементи от списък (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>
<[Изпитва] ->

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

Е! вие лесно може да се определи това чрез коригиране на 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. За да се изброят важно малцина, ще бъде;

• Скриптове не се изисква
• Cross-браузър

Как да правим това?

Направете нещо в 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:
За условния коментар

Забелязали ли сте понякога, как прости неща, просто отказва да работи в IE6 ... location.href е точно такова нещо.

Ако сте добавили функцията OnClick котва тагове като по-долу ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> отидете на ново място </ A>

С някаква функция като това ...
за функция onclickLink (ID) {
VAR URI = "test2.html ID =?" + ID;
window.location.href = URI;
}

За ирония, вие ще забележите, че такова парче на прост скрипт отказва да работи в IE ... Е! Мога да обсъдим причините тук, но не мисля, че си струва да се ... Въпреки, че изглежда да имаме решение ... (Обзалагам се, ако сте разбрали JavaScript, вие ще разберете, защо ние добавите този ощипвам за IE6)

Решението

<a href="javascript:void(0);" onclick="onClickLink('xxx'); връщане false; "> отидете на ново място </ A>

Ако ви се даде прост отговор, моля, направете напишете коментар. Това наистина ще бъде Книга за гости, обзалагам се, от много!

Ако сте били писмено 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 оформление. За да поправите това, просто добавете дисплей: инлайн, плаващ вашата стихия.