Développer div pour ajuster le contenu de largeur fixe dans IE 6 et 7

J'ai besoin d'un div avec une bordure pour entourer le contenu de largeur fixe de taille arbitraire (cela signifie que je ne sais pas quelle sera cette largeur fixe, elle change de page en page).Développer div pour ajuster le contenu de largeur fixe dans IE 6 et 7

Le html ci-dessous fait ce que je m'attendrais dans IE 6, c'est, si vous taillez la fenêtre du navigateur à moins de la largeur du contenu (dans ce cas une largeur fixe <p>, mais il pourrait être tout contenu de largeur fixe), la div avec la bordure cesse de rétrécir sur le bord droit du contenu. Cependant, dans IE 7 (et FF), la frontière continue à se rétrécir pour rester dans la largeur de la fenêtre du navigateur, en passant derrière le contenu.

Existe-t-il un moyen de réduire la taille de la div et de la faire croître avec la fenêtre du navigateur, sans jamais avoir une largeur inférieure au contenu?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 

    <head> 
    <title>Border Test</title> 
    </head> 

    <body> 
    <div style="border: 1px #0000FF solid;padding:3px;"> 
     <p style="width:700px;"> 
     Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit. Praesent varius mi a leo 
     ultrices consequat. Nam id venenatis ligula. 
     Suspendisse et faucibus eros. Donec quis 
     augue eu nunc cursus blandit vel vel odio. 
     Suspendisse rutrum aliquet massa, eu ultricies 
     elit laoreet a. Curabitur feugiat cursus. 
     </p> 
    </div> 
    </body> 
</html>

Mise à jour: Je l'ai fait un peu farfouillé dans IE 8 et display:table dans la déclaration de style <div> fixe là.

<div style="border: 1px #0000FF solid;padding:3px;display:table;">

Est-il possible de simuler display:table dans IE 7?

Source

2009-12-23 jball

add "overflow: auto" à la div mère, alors ...

<div id="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;"> should make it work.

De cette façon, vous avez la meilleure solution CSS peut offrir. Maintenant, comme pour vos utilisateurs, utilisez ce bit de jquery pour donner à la div parent la largeur appropriée, en fonction de son div enfant.

Notez que je donne une classe à vos divs pour que je puisse facilement les cibler.

<body> 
    <div class="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;"> 
     <p style="width:700px;"> 
     Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit. Praesent varius mi a leo 
     ultrices consequat. Nam id venenatis ligula. 
     Suspendisse et faucibus eros. Donec quis 
     augue eu nunc cursus blandit vel vel odio. 
     Suspendisse rutrum aliquet massa, eu ultricies 
     elit laoreet a. Curabitur feugiat cursus. 
     </p> 
    </div> 
<script type="text/javascript"> 
$(function(){ 
    $('.parentDiv').each(function(){ 
     var newWidth = $(this).find('p:first').width(); 
     $(this).width(newWidth); 
    }); 
}); 

</script> 
    </body>

Source

2009-12-23 22:46:59 pixeline

Les barres de défilement ne sont pas une option. Je voudrais que la div cesse de rétrécir sur le bord droit du contenu à largeur fixe. – jball

alors je suppose que vous aurez besoin de fixer la largeur de la div parent et puisque vous ne le connaissez pas à l'avance, vous devrez recourir à javascript, pour donner à la largeur de div parent la valeur de sa largeur p enfant, plus rembourrage et marge. – pixeline

J'espère vraiment que ce n'est pas la seule solution. Je peux le faire assez facilement, mais il se sent vraiment comme un hack. – jball

Pensez à utiliser min-width:

<div style="border: 1px solid rgb(0, 0, 255); padding: 3px; min-width: 700px;"> 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius mi a leo ultrices consequat. Nam id venenatis ligula. Suspendisse et faucibus eros. Donec quis augue eu nunc cursus blandit vel vel odio. Suspendisse rutrum aliquet massa, eu ultricies elit laoreet a. Curabitur feugiat cursus. </p> 
</div>

Min-largeur n'est pas officiellement pris en charge dans IE-6, mais il y a beaucoup de solutions de contournement que vous pouvez trouver sur Google.

Source

2009-12-23 22:58:11

Malheureusement, je ne sais pas quelle sera la largeur du contenu à l'intérieur, donc je ne sais pas quoi définir min-width à. – jball

display: inline; sur la div fait ce que vous voulez:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 

    <head> 
    <title>Border Test</title> 
    </head> 

    <style> 
    div.expanding { 
     display: inline; 
     background-color: cyan; 
     border: 1px solid blue; 
    } 
    </style> 

    <body> 
    <div class="expanding"> 
     <p style="width:700px;"> 
     Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit. Praesent varius mi a leo 
     ultrices consequat. Nam id venenatis ligula. 
     Suspendisse et faucibus eros. Donec quis 
     augue eu nunc cursus blandit vel vel odio. 
     Suspendisse rutrum aliquet massa, eu ultricies 
     elit laoreet a. Curabitur feugiat cursus. 
     </p> 
    </div> 
    </body> 
</html>

Je remarque quelques artefacts sur la machine virtuelle Internet Explorer 7 Je dois remettre bien. La couleur d'arrière-plan se comporte comme prévu.

Source

2011-03-22 15:53:44 silasdavis

Il ne se comporte pas correctement dans IE8 ou Chrome - je n'ai pas testé dans IE7. – jball

Oui c'est spécifique à IE7 – silasdavis

Développer div pour ajuster le contenu de largeur fixe dans IE 6 et 7

Répondre

Questions connexes