Ce dont j'ai besoin est de définir la limite d'une largeur d'une image à 100% dans Internet Explorer, comme les autres navigateurs avec Bien qu'il y ait D'autres questions et réponses qui semblent être à ce sujet, je ne peux pas obtenir d'entre eux de travailler. Par exemple, cette solution est généralement suggérée pour émuler Max-largeur dans Internet Explorer: P> http://www.svendttofte.com/code/max_width_in_ie/ p> Essence en utilisant ceci: p> Cependant, quand j'essaie Je ne reçois pas du tout des résultats attendus. Dans certains cas, je reçois des valeurs de largeur de -1 et aucune image affichée du tout lorsque je vérifie Firebug ou quelque chose comme ça. P> Et je ne vois pas comment cette solution pourrait fonctionner non plus. P> EDIT: P> Selon la demande, voici quelques échantillons de code: p> et le simple CSS (fonctionne pour tous les navigateurs sauf c.-à-Ge): p> mais cela ne fonctionne pas pour ce code dans IE. Peut-être que cela a quelque chose à voir avec le fait qu'il est placé dans une table, je ne sais pas, mais quand j'essaie cet exemple de div sur W3schools, cela fonctionne bien:
http://www.w3schools.com/cssref/playit .asp? nom_fichement = playcsss_max-width & Preval = 50% 25 p> EDIT 2: P> Exemple Page HTML complète: P> max-largeur code>. C'est-à-dire que si la largeur de l'image est supérieure à la largeur de la zone contenant, elle s'échappe pour s'adapter à la largeur de la zone contenant, mais si elle est plus petite, sa taille ne change pas. De même, si l'image est à l'intérieur d'une cellule de table ( td code>) et elle est plus grande que la cellule, je veux que la taille de la cellule, au lieu de l'expansion. <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv-se" xml:lang="sv-se">
<head>
<title>Image test</title>
<style type="text/css">
body {
max-height : 100%;
max-width : 100%;
width : 500px;
}
img {
max-height : 100%;
max-width : 100%;
width : auto;
height : auto;
}
td
{
max-height : 100%;
max-width : 500px;
display : block;
}</style>
</head>
<body id="frontpage">
<h1 class="title topictitle1">Image test</h1>
<div class="body conbody">
<table>
<tbody>
<tr>
<td>
<img src="Push12_byggmatt.jpg" />
</td>
<td>
<img src="Push12Electronic_byggmatt.jpg" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
3 Réponses :
Y a-t-il une raison particulière pour laquelle vous avez mis un div à l'intérieur d'un TD?
Il y a deux choses désactivées que je pense peut-être interférer:
Affichage: pile de table; , lequel td est généralement par défaut. Essayez de changer d'écran en quelque chose comme un bloc ou un bloc en ligne et voyez si cela corrige le problème, puis passez de là (FYI - IE7 ne comprend pas en ligne-block, mais vous pouvez traiter avec cela après avoir compris ce qui cause l'image problème).
Une autre alternative consiste à éviter tout les tables. Le code que vous avez fourni suggère que vous utilisez peut-être une table à des fins de présentation, ce qui n'est pas ce qu'ils sont destinés.
En outre, votre utilisation d'attributs tels que Cellpadding et Valign suggère que vos références sont un peu obsolètes. Je recommande vivement d'apprendre sur des méthodes et des normes plus courantes. Voici un article adressant la cellulePadding pour vous aider à démarrer.
Désolé, j'aurais dû expliquer ceci: je ne crée pas ce code HTML moi-même (Dieu interdit), non, il est généré dans une transformation XSLT de la boîte à outils Open Dita Open pour une documentation technique. Et j'ai très peu d'influence sur les fichiers XML qui constituent la base de la transformation. En outre, je suis d'accord sur lequel il y a beaucoup de temps qui est obsolète dans le code HTML, mais c'est aussi en grande partie sur mes mains. Ce que je fais est de personnaliser une transformation XSLT prédéfinie. Je peux donc faire quelques modifications à la sortie, mais pour changer tout ce serait monumental ... mais je verrai si l'une de vos suggestions aidez dans un fichier de test. Merci.
IE9, au moins, prend le support max-largeur pour les images, mais le pourcentage est relatif à la taille de l'image , pas le > Taille. (Vous pouvez le voir en modifiant 100% à, dites, 70% .) Il fonctionnera quelque peu comme prévu, cependant, si vous spécifiez hériter Au lieu de 100% . Cela héritera de la taille du conteneur pour max-largeur dans IE9. (J'ai seulement testé votre exemple de votre exemple dans IE9, Firefox et Google Chrome, et ce n'est pas vrai que pour cette page, les images resteront à l'écart lorsque la largeur de la fenêtre devient plus petite.) Ce n'est pas une solution parfaite cependant; Dans le mode Navigateur IE8, appliquer hériter de cette manière rendra la largeur de la cellule de table égale à la largeur non déclenchée de l'image, même si l'image est correctement réduite.
Merci. Je n'ai pas eu le temps de le tester, mais c'est une idée qui semble avoir la peine de vérifier, alors je vais aller avec cette réponse.
J'ai testé cela maintenant, et malheureusement, cela n'a pas fonctionné ... Je suppose que hériter ne fonctionne pas car il n'y a pas de max-largeur fixé sur le parent?
max-width est déjà défini sur l'élément parent td , à savoir 500PX. Il "fonctionne" dans la mesure où l'image est éteinte à 500px, qui est la taille donnée par max-largeur sur td . Si vous dites que cela ne fonctionne pas, car l'image ne reste pas à l'écart lorsque la largeur de la fenêtre devient plus petite, gardez à l'esprit que ni IE9 ni autres navigateurs montrent ce comportement dans votre page de test.
réglage
max-largeur: Aucun résolu un problème dans mon cas.
Remarque: Testé sur IE11
Votre question est plus susceptible d'obtenir des réponses si vous fournissez le code que vous avez déjà. Comme il se trouve, si les options typiques ne fonctionnent pas, très bien peut être quelque chose d'interférer avec les techniques, ou d'autres conflits.
Vous pouvez avoir raison en un sens, voir mon édition sur l'exemple W3SHools qui fonctionne. Mais ça ne marche pas dans ma propre page ...
Parlez-vous de IE6? Les versions plus récentes prennent en charge Max-largeur.
Non, je parle de l'IE8 et de l'IE9, et oui, je sais que c'est censé l'appuyer, mais dans mon exemple ci-dessus, cela ne le fait pas. Et le même code est utilisé pour tous les autres navigateurs, où cela fonctionne bien.
@Anderssvensson Êtes-vous sûr que votre site Web est affiché en mode normes? Vous devriez avoir
en haut de votre balisage.J'utilise IE9 et j'utilise les outils de développeur intégrés pour basculer entre les versions de la norme, de la dernière IE9 à IE8. Pas en mode de compatibilité ou quoi que ce soit. Juste des versions de navigateur. Je suis sur Mac OS X Lion, en utilisant Parallels pour ouvrir des fenêtres et c'est-à-dire. Et non, je n'utilise pas le HTML5 DOCTYPE, car il s'agit d'une transformation de XML (effectuée en vrac) à l'aide de la boîte à outils Open Dita Open. HTML5 n'est pas pris en charge là-bas.
Quel Doctype produit-il, alors? Même si ce n'est pas le HTML5, il doit toujours être valable que c'est-à-dire que c'est-à-dire compris.
@Shaauna: Bien sûr. Il utilise le doctype de transition XHTML. Je posterai une page HTML complet complet afin que vous puissiez voir. J'ai testé cela et j'ai testé toutes vos suggestions comme vous pouvez le constater, à l'exception de la suppression totalement de la table (les tables sont importantes car il s'agit de la documentation technique, elle est remplie de tables réelles, pas de tables de mise en page). Cet exemple simple montre le même problème. Essayez-le avec quelques grandes images si vous aimez. Je crois que le problème est que, tandis que IE8 et 9 supportez max-largeur et max-hauteur, ils ne le font que pour les valeurs de pixels, pas pour les pourcentages, quels autres navigateurs font ...