Les nombres ol d'Internet Explorer apparaissent en bas de li au lieu de haut comme prévu
https://stackoverflow.com/questions/110305
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je travaille sur une page qui a un ol avec des p, des div et des li imbriqués. Internet Explorer 6 et 7 affichent tous les deux les numéros de la balise ol après l'élément p à la fin (tout en bas de la balise li) plutôt que tout en haut de la valeur la plus éloignée, comme prévu. Je travaille sur un Mac PowerPC et je ne peux effectuer aucun test. Existe-t-il un simple hack CSS pour rendre ce rendu identique à celui de Firefox?
Vous pouvez afficher la page en ligne ici . Je sais, je travaille sur le positionnement de la barre latérale. Ignorer cela pour l'instant.
Le balisage est le suivant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/whats_included.css" />
<script type="text/javascript" src="script/compliant_target_blank.js"></script>
<!--[if lte IE 5]>
<script type="text/javascript" src="script/ie_5_unsupported_warning.js"></script>
<![endif]-->
<!--[if gt IE 5]>
<link rel="stylesheet" type="text/css" href="css/ie_hacks/global.css" />
<![endif]-->
<title>
The Daily Plan-It, LLC - Home of the Tax MiniMiser
</title>
</head>
<body>
<?php include("includes/nav_bar.php") ?>
<div id="content">
<img src="images/title.png" alt="Tax MiniMiser Financial Tracking System" />
<div id="bordered_wrapper">
<h1>Here's What You Get With The Tax MiniMiser!</h1>
<h2>24 Envelopes, 7-hole punched to fit one-at-a-time in your binder</h2>
<ol>
<li class="main_item">
Business Income & Expense Record
<div class="preview_image">
<a href="previews/large/bier/front.html" rel="external">
<img src="images/small_previews/large/bier_preview.jpg" alt="" /><br/>
Click to Preview!
</a>
</div>
<div class="details">
<ul>
<li>12 receipt envelopes with all the income & expense columns you need to transform your planner or binder into a daily tax journal!</li>
<li>Store daily receipts in the convenient pocket envelopes.</li>
</ul>
</div>
<p>To get a free copy of the "20 Column Heading Guidelines", <a href="files/downloads/20_column_heading_guidelines.pdf">click here</a> or call our Fax-on-Demand line at 888-829-8237.</p>
</li>
<li class="main_item">
Vehicle Mileage & Expense Record
<div class="preview_image">
<a href="previews/large/vme/front.html" rel="external">
<img src="images/small_previews/large/mileage_preview.jpg" alt=""/><br/>
Click to Preview!
</a>
</div>
<div class="details">
<ul>
<li>12 receipt envelopes to track your daily mileage and vehicle expenses. Keep one envelope in each vehicle used for your business(es).</li>
<li>Store daily receipts in the convenient pocket envelopes.</li>
</ul>
</div>
<p>To get a free copy of the "Instructions for Vehicle Mileage & Expense Record", <a href="files/downloads/vehicle_record_instructions.pdf">click here</a> or call our Fax-on-Demand line at 888-829-8237.</p>
</li>
<li class="main_item">
Annual Business Summary of Income and Expense
<div class="preview_image">
<a href="previews/large/cover/inside.html" rel="external">
<img src="images/small_previews/large/cover_inside_preview.jpg" alt="" /><br/>
Click to Preview!
</a>
</div>
<div class="details">
<ul>
<li>Enter the subtotals from all the envelopes throughout the year. Then you and your tax pro can figure out profitability and taxes to maximize your deductions and legally minimize your taxes.</li>
</ul>
</div>
</li>
</ol>
<p class="end">To see previews of the small (6" x 8½") Tax MiniMisers, visit their respective pages <a href="products.php">here.</a></p>
</div>
</div>
<?php include("includes/footer.php") ?>
</body>
</html>
Et le CSS:
#content {
background-color: white;
}
#bordered_wrapper {
margin-left: 26px;
background: top left no-repeat url(../images/borders/yellow-box-top.gif);
}
#bordered_wrapper h1, #bordered_wrapper h2 {
margin-left: 20px;
}
#bordered_wrapper h1 {
padding-top: 15px;
margin-bottom: 0;
}
#bordered_wrapper h2 {
margin-top: 0;
font-size: 1.3em;
}
ol {
font-size: 1.1em;
}
ul {
list-style-type: disc;
}
li.main_item {
width: 700px;
clear: right;
}
li p {
clear: both;
margin-bottom: 20px;
}
.preview_image {
width: 200px;
float: right;
text-align: center;
margin-bottom: 10px;
}
.preview_image a {
text-decoration: none;
}
.preview_image img {
border-style: none;
}
.end {
clear: right;
padding-bottom: 25px;
padding-left: 20px;
background: bottom left no-repeat url(../images/borders/yellow-box-bottom.gif);
}
La solution
Félicitations, vous êtes la victime de la propriété hasLayout .
Version courte: Vous avez la vie facile cette fois-ci. Modifie ces règles:
...
ol {
font-size: 1.1em;
}
...
li.main_item {
width: 700px;
clear: right;
}
...
À ceci:
...
ol {
font-size: 1.1em;
width: 700px;
}
...
li.main_item {
clear: right;
}
...
Et tout va bien.
Version plus longue: lorsque vous appliquez certaines règles CSS à certains éléments, IE 5.5+ attribue à ces éléments une propriété appelée "hasLayout". cela change la façon dont cet élément est rendu. HasLayout étant une propriété en lecture seule sans objectif apparent, les concepteurs Web ont mis longtemps à comprendre le problème. Les sites plus anciens (même Quirksmode.org!) Ont toujours des pages qui suggèrent de tordre le remplissage, les marges ou même d’utiliser du Javascript pour résoudre ces problèmes. Si vous pouvez l'aider, ne faites pas ces choses. Voyez plutôt si vous pouvez savoir quel élément est incorrectement donné à hasLayout et modifiez le code CSS incriminé afin que l'élément ne reçoive plus hasLayout. Si cela bloque totalement votre page, utilisez les commentaires conditionnels pour résoudre ce problème uniquement pour IE. Voici quelques règles CSS qui ajoutent " hasLayout " à un élément qui ne l'a pas déjà:
- position: absolue
- float: left | right
- display: inline-block
- hauteur: toute valeur autre que 'auto'
- zoom: toute valeur autre que "normale" (propriété exclusive de MS)
- mode écriture: tb-rl (propriétaire MS)
À partir d'IE7, le débordement est devenu un déclencheur pour hasLayout.
- débordement: hidden | scroll | auto
Version la plus longue: lisez les articles suivants.
- Voici tout ce que Microsoft aimerait que vous fassiez en déclenchant " hasLayout " .
- Voici la version en langage clair de ce que les concepteurs Web ont pensé à hasLayout lorsqu'ils ont découvert ce que se passait. Certains contenus identiques, mais incluent des hacks CSS et autres.
Autres conseils
Je viens de tester votre exemple html dans firefox 3 / webkit nightly / internet explorer 7 et ils ont tous été rendus exactement de la même manière, avec le chiffre en haut à l'endroit où il devrait figurer.
Le problème vient probablement de votre CSS, pouvez-vous nous montrer la page brisée?
Idem ici, testé avec IE6 sur WinXP Pro SP3, il s’affiche correctement. Vous devez fournir un extrait reproduisant le problème ou une page Web en direct. Peut-être que l’environnement compte, ou le CSS existant, etc.
En fait, j'ai aussi rencontré ce bogue. Avec ma page, cela ne s'est produit qu'après avoir modifié la numérotation à l'aide de javascript. La seule solution un peu réelle disponible consiste à utiliser:
vertical-align: top;
Honnêtement, je n'ai aucune idée du pourquoi de IE7, mais il existe un moyen simple de le réparer.
