2
저는 현재 웹 개발 클래스의 중간 고지 사이트에서 작업 중이며 해결 방법을 찾을 수없는 문제가 있습니다. IE11 (및 이전 버전)은 레이아웃이 마음에 들지 않아 이유가 확실하지 않습니다. Firefox와 Chrome에는 모든 것이 잘 표시됩니다. 이것은 링크입니다 : http://auharvey.com/1510/midterm/index.htmlCSS 레이아웃이 IE 11에서 완전히 엉망이되었습니다.
어떤 도움을 주시면 대단히 감사하겠습니다!
#wrapper {
\t width: 800px;
\t margin-left: auto;
\t margin-right: auto;
\t background-color: #855321;
\t }
\t
body {
\t background-color: #e6c6a6;
\t font-family: calibri, sans-serif;
\t }
header, nav, main, footer {
\t display: block;
\t } \t
\t
/* a:link {
\t color: #855321;
\t }
\t
a:hover {
\t color: #4c9860;
\t }
\t
a:visited {
\t color: #855321;
\t }
\t */
header {
\t background-color: #cc9966;
\t border: 3px solid #855321;
\t margin: 0;
\t padding: 0 10px;
\t
\t }
\t
nav {
\t margin: 0;
\t padding: 0;
\t height: 24px;
\t border: 3px solid #855321;
\t
\t }
nav ul {
\t list-style-type: none;
\t
\t padding: 0;
\t margin: 0;
\t }
\t \t
nav li {
\t display: inline;
\t margin: 0;
\t padding: 0;
\t }
\t
nav a {
\t display:inline-block;
\t width: 262px;
\t height: 24px;
\t background-color: #cc9966;
\t color: #855321;
\t text-align: center;
\t text-decoration: none;
\t text-transform: uppercase;
\t line-height: 24px;
\t font-weight: bold;
\t margin: 0;
\t padding: 0;
\t }
\t
nav a:hover {
\t background-color: #4c9860;
\t color: #855321;
\t }
\t
nav a:visited {
\t color: #855321;
\t }
\t
#container {
\t width: 800px;
\t background-color: #ff0000;
\t }
\t
main {
\t display: block;
\t min-height: 290px;
\t background-color: #cc9966;
\t border: 3px solid #855321;
\t margin: 0;
\t padding: 0 10px;
\t }
\t
#main-right {
\t float: right;
\t width: 374px;
\t min-height: 290px;
\t background-color: #cc9966;
\t border: 3px solid #855321;
\t margin: 0;
\t padding: 0 10px;
\t }
.highlight {
\t background-color: #4c9860;
\t font-weight: bold;
\t font-style: italic;
\t }
.float-left {
\t float: left;
\t width: 374px;
\t }
\t
.float-right {
\t float: right;
\t padding: 0;
\t margin: 10px 5px 10px 10px;
\t }
\t
ul {
\t list-style-type: square;
\t line-height: 150%;
\t }
\t
footer {
\t clear: both;
\t background-color: #cc9966;
\t border: 3px solid #855321;
\t font-size: small;
\t text-align: center;
\t margin: 0;
\t padding: 0;
\t }<!DOCTYPE html>
<html lang="en">
<head>
<title>Enoch Treadwell's Trash Service</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
\t <header role="banner">
\t \t <h1>Enoch Treadwell's Trash Service</h1>
\t </header>
\t <nav role="navigation">
\t \t <ul>
\t \t \t <li><a href="index.html">Home</a></li>
\t \t \t <li><a href="services.html">Services</a></li>
\t \t \t <li><a href="contact.html">Contact</a></li>
\t \t </ul>
\t </nav>
\t <div id="container">
\t \t <main role="main" class="float-left">
\t \t \t <h3>Who We Are</h3>
\t \t \t <p>Enoch Treadwell's Trash Service is the new option in your town for all your trash disposal needs! Weather your looking for a weekly trash pick up or just a one time pick up by appointment we are the best choice! We offer great rates on all our trash disposal services! We even have a special offer for year contracts for weekly pick-up service at the low price of 15.99 a month! Please visit our convenient location at blah blah blah or give us a call at (999) 555-1234 between the hours of 8 to 5 M-F or 10 to 2 on Saturday.<p>
\t \t </main>
\t \t
\t \t <div id="main-right">
\t \t <img src="special2.png" class="float-right" width="100" alt="Specials">
\t \t \t <h3>Specials</h3>
\t \t \t
\t \t \t <ul>
\t \t \t \t <li><span class="highlight">10% OFF</span> Dumpster Rental for bulk</li>
\t \t \t \t <li><span class="highlight">$15.99 </span> a month for Weekly Pick-Up with a one year contact.</li>
\t \t \t \t <li><span class="highlight">20% OFF</span> Pre-Sorted Recyclables</li>
\t \t \t \t <li>Discounted rates for Monday pick-ups.</li>
\t \t \t </ul>
\t \t \t
\t \t </div>
\t </div>
\t <footer role="contentinfo">
\t \t <a href="index.html">Home</a> | <a href="services.html">Services</a> | <a href="contact.html">Contact</a><br>
\t \t Copyright © 2014 Alyssa Harvey<br>
\t \t <a href="mailto:[email protected]">[email protected]</a>
\t </footer>
</div>
</body>
</html>
와우 정말 고마워요. 나는 그것이 W3C 유효성 검사를 통과 한 것에 놀랐습니다. 다음 번에는 유효성 검사를 통과하더라도 더 철저히 확인해 보겠습니다. – Alyssa
좋은 답변을 수락하십시오. 감사 –