Internet Explorer ol Zahlen erscheinen am unteren Rand des li statt oben wie erwartet
https://stackoverflow.com/questions/110305
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin auf einer Seite arbeiten hat eine ol mit verschachtelten p ist, divs und li. Internet Explorer 6 und 7 sowohl die Nummern für den Tag-ol nach dem am Ende p Elemente rendern (zu sehr, sehr Boden des Li-Tages) und nicht an der Spitze des äußersten Li, wie erwartet. Ich arbeite an einem PowerPC-Mac und jede Prüfung nicht tun können. Gibt es einen einfachen CSS-Hack machen dies das gleiche machen wie es funktioniert in Firefox?
Sie können die Live-Seite sehen hier . Ich weiß, ich arbeite in der Sidebar auf die Positionierung. Ignorieren, dass für jetzt.
Markup ist wie folgt:
<!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>
Und die 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);
}
Lösung
Herzlichen Glückwunsch, dass Sie Opfer von IE hasLayout Eigenschaft.
Kurzversion: Sie haben es einfach, diese Zeit. Ändert diese Regeln:
...
ol {
font-size: 1.1em;
}
...
li.main_item {
width: 700px;
clear: right;
}
...
Um dies zu:
...
ol {
font-size: 1.1em;
width: 700px;
}
...
li.main_item {
clear: right;
}
...
Und es ist alles gut.
Längere Version: Wenn Sie bestimmte CSS-Regeln auf bestimmte Elemente anzuwenden, IE 5.5+ gibt diejenigen Elemente eine Eigenschaft namens „hasLayout“, dass Änderungen, wie das Element gerendert wird. Da hasLayout eine schreibgeschützte Eigenschaft ohne erkennbaren Zweck war, dauerte es eine ganze Weile, bis Web-Designer zu dem Thema gefangen. Ältere Websites (auch Quirksmode.org!) Noch hat Seiten, die Polsterung, die Margen schlagen twiddling oder sogar mit Javascript um diese Probleme zu beheben. Wenn Sie überhaupt es helfen kann, tun diese Dinge nicht. Stattdessen sehen, ob Sie können herausfinden, was Element falsch hasLayout gegeben wird, und die CSS säumige ändern, so dass das Element nicht mehr hasLayout bekommt. Wenn das total Ihre Seite Borks, verwenden Sie bedingte Kommentare es zu beheben nur für IE. Hier sind einige CSS-Regeln, die „hasLayout“ auf ein Element hinzufügen, dass es nicht schon hat:
- position: absolute
- float: left | right
- display: inline-block
- height: jeder Wert außer 'auto'
- Zoom: einen anderen Wert als 'normal' (MS proprietär)
- Schreibmodus: tb-rl (MS proprietär)
Ab IE7 wurde Überlauf ein Auslöser für hasLayout.
- overflow: hidden | scroll | auto
Längste Version:. Lesen Sie die folgenden Artikel
- Hier alle ordentlich Dinge Microsoft Sie möchten, tun durch Auslösen „hasLayout“ .
- Hier ist die saubere Sprachversion von was Web-Designer daran gedacht hasLayout wenn sie herausgefunden haben, was vorging. Ein Teil des gleichen Inhalts, sondern umfasst CSS-Hacks und so.
Andere Tipps
ich gerade getestet Ihrem Beispiel html in Firefox 3 / Webkit nächtliche / Internet Explorer 7 und alle von ihnen gemacht genau das gleiche mit der Nummer an der Spitze, wo es sein sollte.
Das Problem wahrscheinlich in Ihrem CSS ist, können Sie zeigen uns die aktuelle Seite, die gebrochen ist?
Hier gilt das gleiche, mit IE6 auf WinXP Pro SP3 getestet, zeigt es richtig. Sie sollten einen Schnipsel Reproduzieren des Problems oder eine Live-Webseite zur Verfügung stellen. Vielleicht sind die Umwelt zählt, oder die vorhandenen CSS, etc.
Eigentlich lief ich in diesen Fehler auch. Mit meiner Seite kam es erst nach der Nummerierung zu ändern Javascript. Die einzigen etwas wirkliche Lösung zur Verfügung mit:
vertical-align: top;
Ich habe ehrlich gesagt keine Ahnung, warum IE7 tut, aber es ist eine einfache Möglichkeit, es zu beheben.
