Круглое решение для всех браузеров? - PullRequest
3 голосов
/ 06 декабря 2011

Я ищу лучшее решение для круглых углов на коробках, которые должны работать во всех браузерах (включая IE 7-9)

Я искал на CSS3 PIE, который казалсямногообещающе, пока не увидел список «Известных проблем».Относительные пути и проблемы z-index заставили меня искать другие решения.Я заметил, что у них также есть «JS Solution» для CSS3 PIE, но у этого также есть несколько больших недостатков.

Ответы [ 7 ]

2 голосов
/ 06 декабря 2011

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

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

2 голосов
/ 06 декабря 2011

НЕТ чистого решения CSS для всех браузеров, вам придется создавать его с помощью изображений, либо с использованием решения Javascript, либо кода CSS, который включает в себя округленные изображения.решения ...

0 голосов
/ 20 марта 2012

Я полагаю, что приведенная ниже ссылка работает в большинстве браузеров, и что Facebook делал что-то подобное в течение недели, чтобы добавить округленный стиль к своему сайту, и затем они поняли, что требуется некоторое время, чтобы загрузить углы для людей из IE.

http://jquery.malsup.com/corner/

0 голосов
/ 07 декабря 2011

На момент написания этой статьи, я не думаю, что есть какие-либо другие "хорошие" решения для закругленных углов в разных браузерах. Я искал высоко и низко, и CSSPIE - лучшее решение, которое я нашел. «Известные проблемы» не так уж и плохи, как альтернатива кудрявым страницам в IE или использованию изображений для всего.

Проблемы с путями, которые вы испытываете, вероятно, связаны с тем, что путь PIE.htc относится к просматриваемому документу 1004 *, а не к файлу CSS, который его вызывает. Только не забудьте проверить это, и вы должны быть в хорошей форме.

Проблемы z-индекса, вероятно, связаны с тем, что у потомков родителя с радиусом границы PIE не установлено значение -pie-watch-ancestors. Кроме того, вы можете просто снова вызвать поведение PIE отдельно для детей.

CSS3PIE нужно немного привыкнуть, особенно если вы пытаетесь заставить его работать с файлами .less, или с shived элементами html5, или если вы используете IE в Parallels на Mac. Есть много вещей, которые могут пойти не так в этих сценариях. Однако я искренне верю, что ПИРОГ - ваша лучшая ставка. Если поначалу у вас ничего не получится, не сдавайтесь. Вы МОЖЕТЕ заставить работать радиус границы в более старых версиях IE, наряду с другими существенными улучшениями, такими как градиенты, тени-тени и тому подобное.

0 голосов
/ 06 декабря 2011

Так как вы включили IE7 выше, я бы сказал, что нет чистого решения CSS, чтобы достичь этого. Современные браузеры поддерживают border-radius для получения закругленных углов, и вам нужно указать -moz и -webkit для браузеров на базе Mozilla и Webkit.

Чтобы получить закругленные углы, я бы посоветовал вам поместить все ваши закругленные углы в одно изображение и сделать из него спрайт. затем используйте background-position, чтобы он работал во всех браузерах, включая нашего старого доброго друга IE6.

0 голосов
/ 06 декабря 2011

Это не совсем тот ответ, который вы ищете (честно, если вы действительно хотите поддержку IE7-8, CSSPIE вполне приличный).

Я использовал без префиксов на моих сайтах в последнее время, поэтому мне не нужно беспокоиться о поддержке поставщиков.Просто используйте тот CSS3, который вы хотите, и js позаботится о добавлении всех предварительных исправлений, где это необходимо.Если / когда все поставщики поддерживают свойства CSS3, просто удалите файл JS, а не просматривайте CSS и удаляйте все префиксные части.

0 голосов
/ 06 декабря 2011

Лучшее, что я могу предложить:

border-radius: 5px;

Я знаю, что это работает не во всех браузерах, но это функция CSS3, поэтому рано или поздно она будет работать во всех браузерах.здесь вы можете увидеть, что он работает для всех основных браузеров http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ и работает в IE9 тоже

...