Висловлюючи IT

Час і знову, коли всі інші браузери, видно, вести себе, як сказали по правилам W3C, IE спіралі вас з розвитку духу, кидаючи істерику, що, здається, не є виправлення. Тільки така людина має це питання в IE7.

Постановка проблеми:
Я і так може багатьох інших серйозних веб-розробники помітили, більше, ніж багато разів, що, коли вкладені плаває в макеті, при наведенні на деякі посилання (якір теги), що містить контейнер, здається, зрушення на декілька пікселів вправо . Я спробував Google вирішення цієї проблеми, але навряд чи знайшов жодного зрозумілої відповіді, чому і коли це відбувається (що могло б допомогти уникнути цієї проблеми не відбулося), тому я ніколи не знаходив чітке рішення проблеми або ...

Можливе рішення:
З досвіду, у мене є повідомлення 90% відсотків часу, тобто, що ця проблема виправлена, додавши зум власності у визначенні CSS від неправильного поводження контейнер ...

 # {Somediv
       зум: 1;
 }

знову причин неоднозначні ... спробуйте це ...
Деякі елементи в IE є "hasLayout" власність, яка є "справжнім" за замовчуванням. Багато візуальні поведінки CSS, наприклад, альфа-фільтр працює тільки на елемент, який hasLayout. і {Zoom: 1}, здається, дає цільових елементів hasLayout власності .... Корисно? Я не думаю так ...

Зум властивість також, здається, підтримує Chrome, але його використання вм'ятина, схоже, набагато негативний вплив на моє розташування ... спробувати його, якщо він працює для вас ... якщо це не так, закладки цю сторінку в "кістки CSS"

Google починає рух, що спонукають людей скинути IE6 ... За прослуховування IE6 користувачів POPUP при завантаженні сторінки ... може бути не дуже гарна ідея ... але, будучи розробником інтерфейсу, я повинен приєднатися до цієї групи універсал ... один менше браузер для мене турбуватися про Вибачте ... це егоїстично! але я включити цей JavaScript ... (TRY до даної сторінки В IE6) ...
Гей! і яскравіше записку ... Подивися це прояв сили JAVASCRIPT .... він може навіть знизити гігантські (або один раз це було)

SO ... Допомога позбавити світ від IE6 з одного рядка JavaScript!

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

Якщо ви 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" />

БІЛЬШЕ ПРО ТИПИ ДОКУМЕНТІВ:

Якщо ви ще не знайомі з подібного тварини під назвою "Doctype" ... ось деякі швидко читати
Які ТИПИ ДОКУМЕНТІВ? Що таке браузер примхи і строгий режим?
Установка DOCTYPE в XSL

Для більш глибокого розуміння ТИПИ ДОКУМЕНТІВ, спробуйте відвідати ці посилання ...
A List Apart: Виправте ваш сайт з правого DOCTYPE!
A List Apart: Beyond DOCTYPE: веб-стандартів, вперед сумісності та IE8

Примітка: Хоча багато хто з нас, HTML / CSS люди були без урахування важливості DOCTYPE decleration в наших документах, Установка правою DOCTYPE, як правило, відповідь на самий хрест запитання оглядача.

CSS для Non-IE браузерах: його не новина для розробників, CSS, селектори CSS дитини як у прикладі нижче, здається, не працює в IE.

, Наприклад, DIV> діапазону {} деякі CSS, це означає, що "при прольоті елемент є дочірнім (а не внук або великий велика дитина і т.д.) поділ елементів".

Але ми використовували це CON в нашу користь. Історично склалося, що дочірній селектор використовується для приховування 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 ;}

Якщо ще не бачили це раніше, повинні прочитати наступну, а також

• Умовні Коментарі: Для ІП-тільки частина Duex
• CSS хак: JavaScript, CSS, HTML для Firefox тільки
• Для ІП тільки

Як завжди, одним з багатьох дивні проблеми з IE, і це треба ряди в ТОР 10 IE сумісності.

Постановка завдання (Це була моя проблема, може бути, у вас є подібні misbehaviors):
У мене є багато DIV це на сторінці з класом "разделРуководітелі", яка є не що інше назву розділу на сторінці. Так що я трохи стилю в такому вигляді

. РазделРуководітелі {Розмір шрифта: 18px; фон: # cfcfcf, оббивка: 5px;}

Справ являє собою легкий сірий з деякими чорного тексту. Що відбувається в IE, деякі з цих заголовків розділів відображаються нормально, але деякі з них невидимим, поки, ви прокрутіть сторінку або натисніть щось на сторінці і т.д. Іноді вони, як правило, зникають при натисканні на "Alt" ключ при сторінку вниз або прокрутити зі смугою прокрутки. Вони іноді, здається, знову з'явиться, коли ви перезавантажте (F5) сторінки. Я коротко зовсім простий DIV з простою стиль веде себе погано.
Що могло стати причиною такого дивного поведінки? Ну! Чесно кажучи, не знаю!

Можливе рішення:
Знову ж таки, не питайте мене, чому, але в багатьох випадках ця проблема як правило, зникають, коли ви додаєте позиції: по відношенню до неправильно себе елементи стилю, як це

. РазделРуководітелі {Розмір шрифта: 18px; фон: # cfcfcf, оббивка: 5px; позиція: відносна}

Дивно, але що сказати? Благослови мене від IE!

І поділяю з США, якщо у вас подібні проблеми.

Oh Well! У попередньому пості кілька днів тому у відношенні прозорості в IE8, я забув згадати один важливий момент, що «IE 8 строгий режим не дозволяє CSS прозорість".
Для тих, хто виграш зрозуміти, що я маю на увазі суворого режиму, ось коротка інструкція .

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

тобто
Замість того, щоб щось на зразок цього

. Lighbox_overlay {
фонового кольору: # FFFFFF;
г-індекс: 1001;
-МОЗ непрозорість: 0,6;
прозорість: 0,60;
фільтр: альфа (непрозорість = 60);
}

Зробіть це ....

. Lighbox_overlay {
Довідкова інформація: URL (bkg.png) повторити;
}

Спробувати, НАТИСНІТЬ ТУТ! | ЗАВАНТАЖИТИ, НАТИСНІТЬ ТУТ!

Якщо ви читаєте цю сторінку в IE8, то ви повинні бачити повний непрозорому білому тлі за цей пост. Вчора мій колега вказав на це для мене (як я є одним з тих людей, які пристосовуються до змін повільно, але вірно ... особливо браузерів. Можна сказати, Я боягуз, але хай буде так .... Будучи розробником інтерфейсу, я завжди лайно боїться нової версії браузера ... Ви знаєте, що їм 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="#"> Home </ 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;
float: left; / * це містить плаваючих елементів списку * /
}
# {Лі меню
маржа: 0; оббивка: 0;
float: left; / * Ця виправлення * /
Ширина: 100% / * прогалини помилка в IE6 * /
}
# {Меню
Дисплей: блок; колір: # 555555;
текст-оздоблення: немає;
оббивка: 0 15px;
висота рядка: 2,5; нижньої межі: 1px твердих # FFF;
}

Якщо наведені вище оленяча шкіра рішення схоже на роботу (з причин, відомим тільки в IE6) ... спробувати цей метод, а не

Просто додайте цю додаткову IE6 тільки стилі розмітки ...

<! - [Якщо IE 7 л>
<style type="text/css">
# Меню Лі {Дисплей: вбудований блок;}
# Меню Лі {Дисплей: блок;}
</ Стиль>
<[ENDIF] ->

Повідомлення IE 6, MSIE був досить люб'язний, щоб нам розробників для користувача інтерфейсу, додавши ще кілька властивостей CSS стандартний для більшості інших стандартних браузерів. Одним з таких корисних властивостей в "хв-висота". Досить прямий власності, яка не потребує довго намотується пояснення. Коли хв висоти для поділу встановлений, він завжди зберігає, що набір висоти, коли зміст цього будинку займає менше, ніж він може вмістити і, головне (на відміну від простої ванілі "висота" власність) або в масштабах CSS словами, він веде себе як розподіл яких "Висота" встановлено в "авто" ...

Для деяких з нас, бідних розробників, які все ще необхідні для коду CSS, які повинні працювати в IE6, не-наявність "мін-висота", може виявитися показувати пробки десь ... Не допускайте попадання відчаю.

На щастя, у нас достатньо примхи в IE, що ми будемо використовувати, щоб з переваг і зламати наш шлях для досягнення нашої мети ... тобто зробити DIVISION поділ, як ніби її міні-висота в IE6

Рішення 1: Використання підкреслення Hack [ Читати далі ... ]

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

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

---

Рішення 2: Використання атрибутів CSS Selector Hack

.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 Selector Hack використовує той факт, що браузер IE6 Tha раніше ігнорувалися atribute-селектор. Зверніть увагу на вимогу іншої контейнер поділ з класом = "SomeClass". Просто presense класу атрибута для цього відділу, перекриває зростання до авто для Opera, Mozilla і MSIE7 і вище. IE6, який не підтримує atribute селекторів, ігнорує його.

Переглянути демо хв висота хак для IE6

У ряді випадків, при цьому макети сторінок з спливаюче підрозділів / лайтбокси / Поради т.д. ми стикаємося з ситуаціями, коли деякі форми Вибір об'єктів виявляється в цих POPUP відділів, дизайн, і це показує через .... YUK!

Ну! Ви можете легко виправити, регулюючи Z-INDEX значення відповідно для FF та IE7. Але старі добрі (каламбур) IE6 поводиться не за призначенням .... Виберіть Показати BOX кінця, навіть після встановлення деяких радикально високий Z-INDEX значень в PopUp відділу ... облом!

Є NO виправлення цієї проблеми, але є, я думаю, більше, ніж кілька дорозі на роботу, вирішити цю проблему, але їм тут, щоб сказати вам просте рішення, яке я використовую, яке відмінно працює для мене, в більшості випадків ....

"ПРИХОВАТИ BOX ROUGE SELECT, коли ви показуєте POPUP"

Просто у вашому скрипті фрагмент, де ви показуєте ваші спливаючі вікна, додати шматочок сценарію створити видимість вікні Вибір "Невидимий"

document.getElementById ('my_select) style.visibilty = "приховані".

І пам'ятайте, щоб встановити його при закритті спливаючих відділу

. Document.getElementById ('my_select) style.visibilty = "видимий";

де "my_select" є ідентифікатором роздратування вікні Вибір

Сподіваюся, що це допомагає ...

PS. Є звичайно ж і інші варіанти, як динамічно positionining IFRAME (такий же розмір, як ви PopUp) в Popup DIV ... Це теж добре працює, але з додаванням навантажень DOM елементи, скрипти і головний біль. Я використав це рішення теж, і якщо ви потребуєте якоїсь допомоги з цією опцією, дайте мені знати. Будемо раді допомогти!