28172 sujets

CSS et mise en forme, CSS3

Ie9 et border-radius

bonjour,

je viens d'installer IE9 avec la promesse que enfin, IE supporte les standards du css.
je viens d'aller voir mon site sur lequel j'utilise des border-radius (http://vincent.bourganel.free.fr/) ...et ça ne marche pas !!

un exemple de CSS utilisé qui fonctionne parfaitement avec FF:

div#page{
	width: 900px;
	background-color: #292929;
	border: 10px solid #4a4a4a;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px;
}


à votre avis, quel est le problème ?
Raphael a écrit :
Bonjour,

Pas de souci sur IE9 chez moi.


Merci de ton retour.
Qu'est-ce qui peut expliquer que cela ne fonctionne pas du tout chez moi ?

Je suis en IE9 (migré depuis IE8) sur Windows7.
Administrateur
Tu es peut-être en "mode de compatibilité" ? Voir dans les réglages quelque part.
Hello

je n'ai pastrouvé comment régler IE9 pour êtr epar défaut en mode IE9.

par contre, j'ai ajouté cette ligne juste après la balse <head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>


et pour le moment, ça résoud le problème...
Salut,
Même si ça ne concerne pas directement IE, je te conseille de déclarer les propriétés avec préfixe vendeur (les -moz-, -webkit-, -khtml- et autres -o- ou -ms-) avant la propriété sans préfixe équivalente, comme suit :
div#page {
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

D'autant plus que Safari 5, Google Chrome 5+ et Firefox 4 reconnaissent la propriété border-radius sans préfixe, à l'instar d'IE 9 et d'Opera. Smiley cligne
Mieux vaut utiliser:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Ce serait dommage de se priver des avancées d'un futur IE 10 par exemple.

Bien sûr, si on a un code HTML valide (avec un Doctype qui va bien), utiliser ce code ne devrait pas être nécessaire. Ça demande aussi de faire attention à ses tests (les tests en local peuvent être en mode de compatibilité par défaut, ça se règle dans certaines options d'IE), donc utiliser cette balise META est une sécurité intéressante, mais dans l'absolu ce n'est pas nécessaire.
fvsch a écrit :
Mieux vaut utiliser:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Ce serait dommage de se priver des avancées d'un futur IE 10 par exemple.

pour IE10, j'ai le temps de voir venir et je pourrais toujours modifier mon code...

fvsch a écrit :

Bien sûr, si on a un code HTML valide (avec un Doctype qui va bien), utiliser ce code ne devrait pas être nécessaire. [...] donc utiliser cette balise META est une sécurité intéressante, mais dans l'absolu ce n'est pas nécessaire.

visiblement, ce n'est pas si simple...
par exemple, je suis suis chez Free, et visiblement, ce serveur influe sur le comportement de IE9 Smiley eek
en effet, sur mon site sous IE9, quand je fais F12, le doctype est "commenté" (sous F12, mais pas quand je regarde le code de la page...) et l'affichage par défaut de mon site est positionné sur "mode de navigateur : Affichage de compatibilité IE9 - mode de document : normes IE7"

pour d'autres personnes qui utilisent mon thème (sur OVH par exemple), le mode de compatibilité est correct et la balise META est inutile...

le seul truc que j'ai trouvé pour "forcer" le fonctionnement normal sous IE9 et Free, c'est d'ajouter la balise META.
Modifié par vincent3569 (01 Apr 2011 - 18:00)
Comme Vincent3569, j'ai le même soucis avec les pages Free et IE9...

Dès que je ferme IE9 et que je l'ouvre à nouveau pour aller sur ma page free, il se remet en mode compatibilité Smiley confus

Je n'ai pas le problème en local avec le serveur apache d'EasyPhp, je n'ai pas testé avec IIs...

La balise meta 
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
règle le souci, je n'ai pas encore testé celle recommandée par fvsch...
Si c'est possible chez free, vous pouvez envoyer l'entête http qui va bien au lieu d'une meta dans le code html. Smiley cligne
Modifié par Patidou (15 Nov 2011 - 07:48)
<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=Edge"
    # mod_headers can't match by content-type, but we don't want to send this header on *everything*
    <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|xpi|safariextz|vcf)$" >
      Header unset X-UA-Compatible
    </FilesMatch>
</IfModule>



Source: html5 boilerplate Smiley cligne
Modifié par Patidou (16 Nov 2011 - 11:09)
même problème pour moi, j'ai une page html 5 simplifiée au maximum et validée sur la structure et le css sur le site W3C validation.
En local IE9 affiche correctement les bordures arrondies mais sur free.fr, niet. Smiley ohwell

j'ai même appliqué le style border-radius en JS pour n'avoir aucune erreur sur W3C CSS validator!


<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="UTF-8" />
        <style type="text/css">
		<!--
            #cadre
            {
				text-align: center;
                border: 1px solid #cc3;                
                overflow: hidden;		
                margin: auto;
				height: 100px;
				width: 200px;
            }
		-->
        </style>
        <script type="text/javascript">
		<!--
			 window.onload = function(){
				document.getElementById("cadre").style.borderRadius = "10px";
			 };
		-->
        </script>
    </head>
    <body>
        <div>
            <div id="cadre">
                <div>test</div>
            </div>
        </div>
    </body>
</html>


Un petite différence visuelle apparaît sur IE9 sur Free.fr qui m'intrigue un peu:

http://nsa28.casimages.com/img/2011/11/30/111130085835972520.png

pourtant il n'y a apparemment pas de frame lorsque je visualise le source qui correspond précisemment au code source de la page. Smiley biggol
Modifié par jparia (30 Nov 2011 - 20:54)
jparia a écrit :
j'ai même appliqué le style border-radius en JS pour n'avoir aucune erreur sur W3C CSS validator!

Du coup ton code de départ passe la validation, mais dès que tu l'as modifié en JS le code résultant n'est pas valide. Donc c'est de la poudre aux yeux.

Rappel: la validation CSS c'est un outil. Par ailleurs:
- On peut demander au validateur CSS d'utiliser un profil de validation CSS 3 plutôt que CSS 2.1.
- Il est normal que le validateur tique sur des préfixes du type -moz- ou -webkit-.

Pour le problème de rendu lui-même: les réponses ont déjà été données ci-dessus.
Modifié par fvsch (01 Dec 2011 - 10:01)
Le JS c'était juste pour m'assurer que c'est pas une problème de validation CSS pour IE
sinon le style est bien appliqué à partir du CSS.

Concernant l'envoi d'entête HTTP, Free n'autorise apparemment pas la modification du header dans un fichier .htaccess et mes pages ne sont pas générées par un code serveur comme PHP...
donc je n'ai pas d'autre solution de placer la balise dans le code HTML.
Modifié par jparia (01 Dec 2011 - 12:34)
Sujet clos
Aller à