2010-09-29 8 views
0

je le code suivant:positionnement CSS avec IE8 - expressions pas prises en charge

<html> 
<head> 
<style type="text/css"> 
DIV#left 
{ 
z-index: 100; 
position:absolute; 
left:0px; 
top:0px; 
width: 100px; 
height: 100px; 
background-color: #e7e7e7; 
} 
DIV#right 
{ 
z-index: 100; 
position:absolute; 
left:100px; 
top:0px; 
width: 100px; 
height: 100px; 
background-color: #e20074; 
} 
</style> 
</head> 

<body> 
<div id="left"> 
1 
</div> 
<div id="right"> 
2 
</div> 
</body> 

</html> 

Mais je dois le droit section div à être étendu à la fin de la page (width = 100%) Voici donc comment j'ai changé la largeur pour DIV # droite:

width: expression(parseInt(document.body.offsetWidth)-100); 

Malheureusement, cela ne fonctionne plus avec IE! IE8 et firefox ignorent les expressions. Comment puis-je surmonter ce problème?

Merci beaucoup d'avance!

+2

Oh non, maintenant vous devez concevoir des pages Web de la bonne façon! – Welbog

Répondre

1

Vous ne devriez pas utiliser des expressions CSS comme celles-ci - elles sont lentes, anciennes et, surtout, propriétaires, ce qui signifie qu'elles ne fonctionneront pas autrement que sur IE.

Voici une solution simple qui fonctionne sur Firefox, IE8 et IE7 [mais pas IE6 si]: donner le droit div un right: 0 pour forcer le div à étendre à tout le chemin jusqu'à la fin de la page:

#right { 
    position: absolute; 
    left: 100px; 
    top: 0; 
    right: 0; 
    height: 100px; 
} 

Voir: http://jsfiddle.net/hEeVY/

Si vous utilisez des expressions pour quoi que ce soit, il est probablement mieux d'utiliser JavaScript pour obtenir le même effet.

+0

Salut, désolé, mais cela ne fonctionne pas, vous pouvez l'essayer ici: –

+0

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro –

+0

@wa_liu Non, je ne peux pas voir que - que code terrain de jeu thingy est seulement visible pour vous, car il n'est pas enregistré. Si vous avez besoin de me montrer quelque chose, vous pouvez essayer d'utiliser jsfiddle à la place. –

0

Oui, expressions CSS sont lents, ils affectent la performance. Avec eux, ils compromettent également la sécurité. La solution spécifiée par Yi Jiang doit fonctionner.

Maintenant, tous les navigateurs fonctionnent selon les mêmes termes. Pour en savoir plus sur pourquoi les expressions ont été abandonnées, veuillez vérifier http://techbookshelf.blogspot.in/2012/11/css-expressions-in-ie8-and-higher.html

+1

Bienvenue dans Stack Overflow! Merci d'avoir posté votre réponse! Veuillez vous assurer de lire attentivement la [FAQ sur l'autopromotion] (http://stackoverflow.com/faq#promotion). Notez également qu'il est * obligatoire * que vous publiez une clause de non-responsabilité chaque fois que vous créez un lien vers votre propre site/produit. –