I numeri di Internet Explorer vengono visualizzati nella parte inferiore di li anziché nella parte superiore come previsto
https://stackoverflow.com/questions/110305
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto lavorando ad una pagina con un ol con p, n div e li di n nidificati. Internet Explorer 6 e 7 eseguono entrambi il rendering dei numeri per il tag ol dopo l'elemento p alla fine (in fondo al tag li) piuttosto che nella parte superiore del li più esterno come previsto. Sto lavorando su un Mac PowerPC e non posso fare alcun test. Esiste un semplice trucco CSS per rendere questo rendering uguale a quello di Firefox?
Puoi visualizzare la pagina live qui . Lo so, sto lavorando per posizionare la barra laterale. Ignoralo per ora.
Il markup è il seguente:
<!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>
E il 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);
}
Soluzione
Congratulazioni, sei vittima della proprietà hasLayout di IE. / p>
Versione breve: questa volta è stato facile. Modifica queste regole:
...
ol {
font-size: 1.1em;
}
...
li.main_item {
width: 700px;
clear: right;
}
...
A questo:
...
ol {
font-size: 1.1em;
width: 700px;
}
...
li.main_item {
clear: right;
}
...
Ed è tutto a posto.
Versione più lunga: quando applichi determinate regole CSS a determinati elementi, IE 5.5+ fornisce a quegli elementi una proprietà chiamata " hasLayout " che cambia il modo in cui quell'elemento viene reso. Dal momento che hasLayout era una proprietà di sola lettura senza uno scopo apparente, ci sono voluti un po 'di tempo prima che i web designer afferrassero il problema. I siti meno recenti (anche Quirksmode.org!) Contengono ancora pagine che suggeriscono il riempimento, i margini o persino l'utilizzo di Javascript per risolvere questi problemi. Se puoi aiutarlo, non fare queste cose. Invece, vedi se riesci a scoprire a quale elemento viene assegnato erroneamente hasLayout e modifica il CSS offensivo in modo che l'elemento non ottenga più hasLayout. Se questo blocca totalmente la tua pagina, usa commenti condizionali per risolverlo solo per IE. Ecco alcune regole CSS che aggiungono " hasLayout " a un elemento che non lo possiede già:
- posizione: assoluta
- float: left | right
- display: inline-block
- altezza: qualsiasi valore diverso da "auto"
- zoom: qualsiasi valore diverso da "normale" (proprietario MS)
- modalità di scrittura: tb-rl (proprietario MS)
A partire da IE7, l'overflow è diventato un trigger per hasLayout.
- overflow: nascosto | scroll | auto
Versione più lunga: leggi i seguenti articoli.
- Ecco tutte le cose belle che Microsoft vorrebbe fare attivando " hasLayout " .
- Ecco la versione in lingua pulita di ciò che i web designer hanno pensato su HasLayout quando hanno scoperto cosa stava succedendo. Parte dello stesso contenuto, ma include hack e cose CSS.
Altri suggerimenti
Ho appena testato il tuo esempio html in firefox 3 / webkit nightly / internet explorer 7 e tutti sono stati resi esattamente uguali con il numero in alto dove dovrebbe essere.
Il problema è probabilmente nel tuo CSS, puoi mostrarci la pagina effettiva che è rotta?
Lo stesso qui, testato con IE6 su WinXP Pro SP3, mostra correttamente. È necessario fornire uno snippet che riproduca il problema o una pagina Web live. Forse l'ambiente conta, o il CSS esistente, ecc.
In realtà, ho riscontrato anche questo errore. Con la mia pagina è successo solo dopo aver cambiato la numerazione usando javascript. L'unica soluzione in qualche modo reale disponibile sta usando:
vertical-align: top;
Onestamente non ho idea del motivo per cui IE7 stia facendo, tuttavia esiste un modo semplice per risolverlo.
