2008 10 октября 2008

НЕ только для IE - CSS селекторы ребенка не работает в IE

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 ;}

Если еще не видели это раньше, должны прочитать следующую, а также


2008 4 октября 2008

Исчезающие HTML / DIV элементов в Internet Explorer [IE]

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

Постановка задачи (Это была моя проблема, может быть, у вас есть подобные misbehaviors):
У меня есть много DIV это на странице с классом "разделРуководители", которая есть не что иное название раздела на странице. Так что я немного стиля в таком виде

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

Дел представляет собой легкий серый с некоторыми черного текста. Что происходит в IE, некоторые из этих заголовков разделов отображаются нормально, но некоторые из них невидимым, пока, вы прокрутите страницу или нажмите что-то на странице и т.д. Иногда они, как правило, исчезают при нажатии на "Alt" ключ при страницу вниз или прокрутить с полосой прокрутки. Они иногда, кажется, снова появится, когда вы перезагрузите (F5) страницы. Я коротко совершенно простой DIV с простой стиль ведет себя плохо.
Что могло стать причиной такого странного поведения? Ну! Честно говоря, не знаю!

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

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

Странно, но что сказать? Благослови меня от IE!

И разделяю с США, если у вас подобные проблемы.


2008 15 июля 2008

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

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

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

т.е.
Вместо того, чтобы что-то вроде этого

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

Сделайте это ....

. Lighbox_overlay {
Справочная информация: URL (bkg.png) повторить;
}

Попробовать, НАЖМИТЕ ЗДЕСЬ! | СКАЧАТЬ, НАЖМИТЕ ЗДЕСЬ!


2008 6 июля 2008

Нет "прозрачность" в IE8

Если вы читаете эту страницу в IE8, то вы должны видеть полный непрозрачном белом фоне за этот пост. Вчера мой коллега указал на это для меня (как я являюсь одним из тех людей, которые приспосабливаются к изменениям медленно, но верно ... особенно браузеров. Можно сказать, Я трус, но пусть будет так .... Будучи разработчиком интерфейса, я всегда дерьмо боится новой версии браузера ... Вы знаете, что им tlaking О, правда?)

Копали вокруг в то время, пытаясь найти решение, чтобы исправить ее, а затем то, что ...
На этот раз наше ВСЕ ВРЕМЯ ЛЮБИМЫЙ браузер сделал это снова и снова, удаляя все поддержкой прозрачности CSS. Нестандартные `фильтр: альфа (непрозрачность = # #)` CSS атрибут был удален, Ницца, но и совершенно забыли добавить поддержку CSS3 непрозрачности (например, как всех остальных браузеров это хорошо держали его в). Так, впервые с момента Бог рассказал нам о CSS прозрачность (с IE 5.0, я думаю), веб-браузер не поддерживает CSS прозрачность.
А теперь сливки на вершине: Официальный слово IE 8 команде? Это "дизайн" и "мы будем рассматривать это в будущих версиях IE".

PS: Попробуйте эту страницу в FF, клянусь, что это выглядит аккуратно!


2008 20 июня 2008

Белый ошибка пространства в линии / Список товаров (ли) в IE6

Если вы когда-либо сделали (или на один) Вертикальное меню с помощью списка (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] ->


2008 12 апреля 2008

CSS Крест браузера Минимальная высота Hack

Сообщение 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



2008 15 марта 2008

Раздражает Выбор коробки видно через Popup отделы

В ряде случаев, при этом макеты страниц с всплывающее подразделений / лайтбоксы / Советы т.д. мы сталкиваемся с ситуациями, когда некоторые формы Выбор объектов оказывается в этих 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 элементы, скрипты и головная боль. Я использовал это решение тоже, и если вы нуждаетесь в какой-нибудь помощи с этой опцией, дайте мне знать. Будем рады помочь!


2008 8 января 2008

Условные Комментарии: Для ИП-только часть Duex

Несколько месяцев назад мы видели, как мы могли бы включить кусок CSS, которая была бы видна только IE6 ( Для ИП только ). Есть и другие способы для достижения этой цели, а также. Просто включите отдельный CSS, специфичные для вашей целевой IE. это может быть достигнуто с тем, что называют условные комментарии.

Условные комментарии способ определить тип браузера и его версии. Браузер обнаружения проводится для того, чтобы содержание представлено в браузер специальный. Браузер обнаружения можно сделать с помощью различных методов. Этот метод имеет ряд преимуществ по сравнению с предыдущими методами, которые включали стиль переключение с помощью JavaScript. Чтобы перечислить несколько важных, будет;

  • Сценарии не требуется
  • Кросс-браузер

Как мы это делаем?

Сделайте что-нибудь в IE 5 только
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Сделайте что-нибудь во всех версиях IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Сделайте что-нибудь во всех версиях IE, что новый 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:
О условный комментарий


2007 8 сентября 2007

Для ИП только

Если вы писали в то время как для CSS, вы должны испытывать те времена, когда вы буквально тянуть ваши волосы, когда ваш CSS макеты выглядели хорошо во всех новых браузеров (я имею в виду браузеров IE6 позднее), но IE 6 бросает истерику. Вы боретесь трудно настроить CSS, но это не работает ... Ну! Попробуйте эти хаки ...

1. Подчеркивание Hack: -
По определению, спецификация CSS 2.1 позволяет подчеркивание ("_") в идентификаторах CSS. Но многие браузеры до сих пор, кажется, игнорируют любые определяет приступил подчеркивания, но IE. Это ошибка в IE / функции таким образом, становится ясно способ установить CSS свойства для ИП только. так что не забудьте, свойство CSS написан с подчеркивания в начале видна для Internet Explorer (все версии, но IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

Просмотреть демонстрацию этого подчеркивание рубить

Кроме того, мин высота хак для IE6 использует подчеркивание рубить, проверить


2. Решетка (#) Hack: -
Как подчеркивают рубить, на этот раз слишком для ИП Олы, с хорошей разницей, имущество идентификаторы начинаются с # о начале видна для всех версий 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*/
}

Эти хаки кажется послание с небес, когда ничего не работает ... Если любой из этих хаки сохраняет жизнь когда-нибудь, не забудьте угостить меня кофе :)


2007 12 июля 2007

Наведите курсор мыши на событие в прозрачной разделение в IE

У меня была эта проблема, когда, если у вас наведении курсора мыши на событие деления (DIV), а разделение, некоторые основания должна быть прозрачной (как в моем случае, где она требуется для отображения некоторых тегов на изображении при наведении курсора мыши на это прозрачное разделение), IE не смог вызвать наведении курсора мыши события (работало в FireFox).

Пробовал несколько вариантов ... многие из которых была просто отчаянная попытка получить событие срабатывает в IE. Один из них разумное, что я думал, могли бы работать было установить цвет фона для разделения и установите непрозрачность до нуля ... Ну! вмятина работа!

Окончательное решение которых, казалось, работали и не мешать функциональности я требовалось поставить в один пиксель повторяется / прозрачный фон изображения в том, что разделение

Глупый ...! но теперь IE, похоже, счастлив.


NDK дома | Выражая IT | Выражая неба | Выражая Penmenship | Выражая трепет | выразить себя