2011-01-10 2 views
0

Я использую CSS3PIE для применения некоторых закругленных углов к элементам в Internet Explorer, которые будут получать их по таблице стилей в других браузерах. Однако я столкнулся с некоторыми проблемами.Вопросы CSS3PIE в IE6 и 8

В IE8 я обнаружил, что любой элемент, имеющий поведение PIE, будет вести себя странно. Контейнер переместился бы на несколько пикселей вправо, но содержимое оставалось в исходном положении, что придавало бы видимость, что содержимое было сдвинуто влево относительно его контейнера. Это было бы особенно проблематично для элементов с отсутствием или небольшим количеством прокладок.

Я смог взломать проблему в IE8 с помощью X-UA-Compatible, но я предпочел бы избежать этого решения, если это вообще возможно. У меня нет доступа к IE9 для тестирования, но мое понимание хаков вроде PIE не является необходимым, и было бы бесполезно принудительно использовать режим совместимости в браузере, который ему не нужен.

У меня проблемы с IE6 с худшими проблемами, при этом макет PIE полностью разбивается на список, который настроен для использования элементов списка display:inline; zoom:1; (для имитации встроенного блока, который работает в IE8 и других браузерах). Здесь границы элементов списка оказываются в совершенно неправильном месте.

В идеале я бы хотел, чтобы PIE работал правильно в IE6, а в IE8 - без необходимости использовать режим совместимости. Что касается IE6, то изящный откат, когда PIE просто не применяется, будет делать. IE7 - единственный браузер, где страница отображается так, как предполагалось.

Я не могу представить примерную страницу только в момент, к сожалению, я могу добавить еще одну позже.

Развейте:

Вот некоторые экранные грейферы, сделанные с IE Tester. Я надеюсь, что они сделают вещи более понятными для всех. Как вы можете видеть, IE7 в порядке. Однако в IE8 контейнеры смещены влево относительно их содержимого, а в IE6 элементы списка (с округленной рамкой 1 пиксель) являются полным беспорядком!

Internet Explorer 8 with offset boxes IE7 is correct IE6 is really mangled!

Полные версии размера для IE8, IE7 и IE6 также доступны

Followup 2

Вот ссылка на демо-странице.

Поскольку другие дизайнеры работают над таблицами стилей и другими частями дизайна, я не могу обещать, что он будет оставаться полностью отражающим в течение очень долгого времени, но, надеюсь, он будет достаточно долго, чтобы решить проблему. (Да, я знаю, что в IE6 есть ошибки JS, это не моя проблема).
Example page

+0

Re: IE9: IE9 будет поддерживать все функции, которые реализует PIE, поэтому PIE явно отключается в IE9. IE9 должен отображать закругленные углы и т. Д. Из вашего стандартного CSS. Вы можете (и должны) загрузить версию предварительного просмотра IE9 для тестирования; его можно запускать рядом с другими версиями IE, поэтому он не повредит. – Spudley

+0

К сожалению, IE9 не является вариантом, моя основная машина - Mac, а системы Windoes, к которым у меня есть доступ, основаны на XP. – GordonM

ответ

1

я предпочитаю использовать http://www.curvycorners.net/

+0

Как это сравнить с ПИРОМ? Вы пробовали оба и нашли проблемы в одном, которые не были в другом? – GordonM

+0

есть. Я использовал PIE, и у меня были проблемы. и я нашел curbycorners, который работает хорошо, и я использую его. вот сайт, который я использую. он работает как на изображении, так и на div. http://www.timimeromatimro.com/timimeromatimro – kamal

0

Попробуйте добавить

position:relative; 
z-index: 0; 

как предложено здесь http://css3pie.com/forum/viewtopic.php?f=3&t=10

Этот вопрос похож на тот, публикуемую здесь: CSS3 PIE - Giving IE border-radius support not working?

+0

Извините, без радости. Я могу заставить его работать только в 8 с мета-тегом режима совместимости x-ua, а вовсе не в IE6. – GordonM

1

Я испытывал похожий вопрос с IE8. Элементы PIE, которые были применены, сначала отображали на 10-20px ниже, а затем прыгали в правильное положение. Применение правила «display: inline» к элементу, казалось, остановило проблему. "Позиция: относительная;" и «zoom: 1» на элементе или родительском элементе, казалось, не имеет никакого эффекта.

Это немного странно. Когда применяется правило «display: inline», проблема исчезает при обновлении . Но если вы удалите правило, оно все равно будет выглядеть нормально при обновлении, пока вы не закроете и не закроете окно браузера - тогда снова появится прыжок.

Надежды, которые помогают кому-то.

Смежные вопросы