Границы радиуса для IE8

Question

У меня проблема с радиусом границы в IE8, до сих пор я использовал pie.js, но я не рекомендую эту библиотеку js, потому что она глючит.Если у вас небольшой сайт с небольшим количеством html-страниц, использование этой библиотеки более чем нормально, но если у вас тяжелое приложение, в котором используется много разных фреймворков, то использовать его невозможно.Такое же поведение для CurvyCorners или других мега библиотек.

Так что, если кто-нибудь может помочь мне с небольшим плагином jQuery или javascript, чтобы сделать только border-radius в IE 8, я буду благодарен за жизнь.

Answer 1

Попробуйте это:

требует:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>

Javascript:

$('.box').corner();

HTML:

<div class="box">Hello</div>

CSS:

box{
  width:150px;
  height:28px;
  padding:10px;
}

больше примеров: http://jquery.malsup.com/corner/

Answer 2

Если не использовать библиотеки, которые вы описали в своем вопросе, я не думаю, что вы можете делать изогнутые углы в IE8.

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

Answer 3

Согласно Microsoft :

Другие решения с закругленными углами

Мы хотели бы указать на обилие альтернативных решений, доступных в Интернете,В дополнение к отдельным решениям с закругленными углами, существуют также сайты с часто обновляемыми списками решений с закругленными углами, которые совместимы с несколькими версиями Internet Explorer и других браузеров.

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

• CSS-Discuss Wiki, RoundedCorners: http://css -обсуждения.incutio.com/?Техника закругленных углов с CSS: http://www.cssjuice.com/25-rounded-corners- Техника с CSS /

Answer 4

Проверьте это сообщение: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

В IE7 / 8 он охватывает конкретно закругленные углы и тень от коробки.

, а также ниже с таким количеством примеров

http://blue -anvil.com / jquerycurvycorners / test.html

Answer 5

Я использовал border-radius.htc в прошлом.

Единственная проблема в том, что URL-адреса CSS относятся к файлу CSS. HTC относятся к странице.

вы можете скачать демо здесь.

Answer 6

Почему бы вам не использовать угловой плагин jQuery ?

Вы можете легко применять углы к любому элементу с определенным именем класса или ID; например:

$("#box1").corner();

Это также позволяет вам украшать или изменять тип углового эффекта, который вы хотите украсить ваши элементы.

Вы также можете использовать другие решения JavaScript, такие как CurvyCorners или даже некоторые CSS-решения . Другой вариант - использовать JavaScript, чтобы обернуть <div> элементы входных данных вашей формы, и использовать фоновое изображение CSS, чтобы эмулировать вид закругленных углов. Инструкции по этому последнему решению см. В этом руководстве .

.

Answer 7

Почему бы вам не использовать псевдо-классы css ': before и: after, чтобы добавить изогнутые углы.

Ваш комментарий к ответу Тома Уилла предположил, что у вас есть много форм ввода правильно?

Ну, я предполагаю, что они будут в основном одинаковыми по ширине.

Просто создайте несколько классов, таких как curved-std-width, curved-lge-width, curved-sml-width, и тогда вы можете сделать это в своем CSS:

.curved-std-width:before {
  height: 5px;
  background: url('curved-top-5px.png');
}

.curved-std-width:after {
  height: 5px;
  background: url('curved-bottom-5px.png');
}

Что-то в этом роде должно работать очень хорошо, без необходимости идти и добавлять бесконечные html до и после ввода формы.

В противном случае вы также можете сделать это с помощью jQuery:

$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>');

А затем стиль соответственно.

Answer 8

Это некрасиво, но может сработать, если вы заранее знаете цвет фона полей ввода (что может быть проблемой с кнопками отправки): http://jsfiddle.net/563c5/1/

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

IE8 поддерживает встроенные изображения CSS, и вам нужно только 1 маленькое изображение для всех четырех закругленных углов. Любое решение, основанное на угловых изображениях, может фактически потребовать всего несколько дополнительных байтов полосы пропускания.

Answer 9

Вы можете использовать изображение с круглым углом, чтобы ограничить деление.Пример:

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

Или вы создаете магию вроде:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Answer 10

Используйте это: http://css3pie.com/

PIE позволяет Internet Explorer 6-9 отображать несколько наиболее полезных функций оформления CSS3.

Поддерживаемые функции CSS3

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image