web-dev-qa-db-fra.com

Rayon de bordure pour IE8

J'ai un problème avec le rayon de bordure sur IE8, jusqu'à présent j'ai utilisé pie.js mais je ne recommande pas cette bibliothèque js car elle est boguée. Si vous avez un petit site avec peu de pages html, il est plus que correct d'utiliser cette bibliothèque, mais si vous avez une application lourde dans laquelle de nombreux frameworks différents sont utilisés, il est impossible de l'utiliser. Même comportement pour CurvyCorners ou d'autres méga bibliothèques.

Donc, si quelqu'un peut m'aider avec un petit plugin jQuery ou javascript pour faire juste border-radius sur IE 8 je serai reconnaissant pour la vie.

javascriptjquerycssinternet-explorer-8css3
35
BurebistaRuler

Essaye ça:

a besoin:

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

plus d'exemples: http://jquery.malsup.com/corner/

40
Abudayah

À moins d'utiliser les bibliothèques que vous avez décrites dans votre question, je ne pense pas que vous puissiez faire des coins courbes dans IE8.

Si vous les vouliez vraiment, vous pourriez probablement utiliser une image pour donner l'effet de coin incurvé, au prix d'une bande passante accrue et d'un code désordonné.

18
Tom Will

Selon Microsoft :

Autres solutions à coins arrondis

Nous tenons à souligner l'abondance de solutions alternatives disponibles sur le Web. En plus des solutions individuelles aux coins arrondis, il existe également des sites avec des listes fréquemment mises à jour de solutions aux coins arrondis qui sont compatibles avec plusieurs versions d'Internet Explorer et d'autres navigateurs.

Voici quelques-uns de nos sites préférés pour les solutions de coins arrondis agrégés. Ils ne sont présentés dans aucun ordre particulier, et l'inclusion de tout lien n'implique pas l'approbation par Microsoft du site.

6
j08691

Consultez cet article: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-Explorer/

Il couvre les coins spécifiquement arrondis et l'ombre de la boîte dans IE7/8.

et aussi ci-dessous avec tant d'exemples

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

5
samirprogrammer

J'ai utilisé border-radius.htc dans le passé.

Le seul inconvénient est que les URL CSS sont relatives au fichier CSS. HTC sont relatifs à la page.

vous pouvez télécharger la démo ici.

4
Etch

Pourquoi n'utilisez-vous pas css ': avant et: après les pseudo-classes pour ajouter des coins courbes.

Votre commentaire sur la réponse de Tom Will suggère que vous avez beaucoup d'entrées de formulaire, n'est-ce pas?

Eh bien, je suppose qu'ils auront une largeur généralement uniforme.

Créez simplement des classes comme curved-std-width, curved-lge-width, curved-sml-width et vous pouvez le faire dans votre 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');
}

Quelque chose comme ça devrait fonctionner assez bien sans que vous ayez à ajouter des html sans fin avant et après les entrées de formulaire.

Sinon, vous pouvez également le faire en utilisant 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>');

Et puis coiffez convenablement.

3
Thomas Clayson

Pourquoi n'utilisez-vous pas jQuery plugin d'angle ?

Vous pouvez facilement appliquer des coins à n'importe quel élément avec un nom de classe ou un ID spécifique; par exemple:

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

Il vous permet également de décorer ou de modifier le type d'effet d'angle que vous souhaitez orner vos éléments.

Vous pouvez également utiliser d'autres solutions JavaScript comme CurvyCorners ou même certaines solutions CSS . Une autre option consiste à utiliser JavaScript pour envelopper <div> éléments vos entrées de formulaire et utiliser l'image d'arrière-plan CSS pour émuler l'apparence des coins arrondis. Pour des instructions sur cette dernière solution, voir ce tutoriel .

3
hohner

C'est moche mais pourrait fonctionner si vous connaissez au préalable la couleur d'arrière-plan des champs de saisie (ce qui peut être un problème avec les boutons d'envoi): http://jsfiddle.net/563c5/1/

Je n'ai aucune idée de comment il se comportera lors du rendu de nombreux champs de saisie dans un ordinateur moyen.

IE8 prend en charge les images CSS en ligne et vous n'avez besoin que d'une petite image pour les quatre coins arrondis. Toute solution reposant sur des images de coin peut en fait nécessiter seulement quelques octets supplémentaires de bande passante.

2
juanrpozo

Avez-vous essayé ceci: http://jquery.malsup.com/corner/

1
MatthewK

Je recommanderais d'essayer Modernizr , la grande chose à ce sujet est que vous pouvez l'utiliser pour remplacer la plupart (sinon la totalité) CSS3 non pris en charge dans les anciens navigateurs. Je l'ai utilisé sur un certain nombre de grandes applications Web sans drames.

Vous pouvez également consulter la bibliothèque jQuery UI qui, je crois, a des scripts aux coins arrondis.

J'espère que cela aide ... bonne chance!

1
Ryan

Utilisez ceci: http://css3pie.com/

PIE rend Internet Explorer 6-9 capable de rendre plusieurs des fonctionnalités de décoration CSS3 les plus utiles.

Fonctionnalités CSS3 prises en charge 

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

Vous pouvez utiliser une image avec un coin rond pour encadrer une div. Exemple:

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

Ou vous faites de la magie comme:

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

1
cowboybkit

vous devriez utiliser l'alternative pie.htc, sa chose similaire mais moins boguée, et de toute façon je ne le recommande pas.

L'utilisation intensive d'éléments css3 sur ces navigateurs non conformes à css3, ne fonctionne pas bien, il est probable que leur système ne soit pas trop à jour, ce qui les rend extrêmement lag. Il est donc bon pour eux de se dégrader vers un coin normal.

Si vous voulez vraiment que cela soit joli, c'est-à-dire que vous utilisez le mieux les arrière-plans d'image Sprite, ou vous allez changer pour chasser un certain nombre de vos visiteurs pour des problèmes de retard.

1
devric

Je ne sais pas s'il a été couvert par les contributeurs précédents, mais j'ai utilisé principalement la bibliothèque dd_roundies, et pour les coins arrondis seuls, cela a fonctionné bien. Mélanger les coins avec des filtres IE était généralement trop demander cependant.

1
heliogabal

Juste une autre solution basée sur JavaScript: Nifty Corners Cube . Il est publié sous la forme GNU GPL et n'a pas besoin de jQuery.

0
Pino

Utilisez ce code pour obtenir un coin arrondi dans 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>
0
Manikanta