Подтвердить что ты не робот

Радиус границ для IE8

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

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

4b9b3361

ОТВЕТЫ

Ответ 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/

Ответ 2

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

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

Ответ 3

Согласно Microsoft:

Другие решения Rounded Corners

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

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

Ответ 6

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

Ваш комментарий к Tom Will отвечает, что у вас есть много входов формы правильно?

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

Просто создайте такие классы, как 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>');

И затем подходящим образом.

Ответ 7

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

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

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

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

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

Ответ 8

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

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

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

Ответ 9

Я бы порекомендовал дать Modernizr a go, великая вещь - вы можете использовать его, чтобы заменить большинство (если не всех) неподдерживаемый CSS3 в старых браузерах. Я использовал его в нескольких крупных веб-приложениях без каких-либо драм.

Вы также можете посмотреть библиотеку jQuery UI, которая, как мне кажется, имеет несколько скругленных скруглений.

Надеюсь, это поможет... удачи!

Ответ 10

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

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

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

Ответ 11

Не уверен, что он был покрыт предыдущими вкладчиками, но я использовал в основном библиотеку dd_roundies, а для закругленных углов он работал нормально. Смешивание углов с фильтрами IE обычно было слишком много, чтобы спросить, хотя.

Ответ 13

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

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

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

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

Ответ 15

Просто другое решение на основе JavaScript: Nifty Corners Cube. Он выпущен как GNU GPL и не нуждается в jQuery.

Ответ 16

Используйте этот код для округления в IE 6 +

<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>
<script>
    $('#logo-navsection').corner( function() {
        $("this").css("border-top", "0px 0px opx 10px")                
    });
</script>