我的CSS在W3C上验证,我有正确的容器div和子div,并在子div中有浮动元素。
以下CSS适用于Firefox和Chrome。但是无法弄清楚为什么ie9不喜欢它,反之亦然。
CSS:
.container{margin:0px auto;width:1200px;border:1px solid #e5e4e2;}
.toppanel{width:1200px;text-align:center;height:100px;background-color:#a1b8a3;margin-top:-20px}
.lpanel{float:left;width:250px;height:1000px;border:1px solid #e5e4e2;background-color:#233245;padding:10px;color:white}
.lpanel2{width:190px;height:500px;margin:0px auto;background-color:white;color:maroon;padding:20px;text-align:center;}
.rpanel{float:right;width:250px;height:1000px;border:1px solid #e5e4e2;background-color:#e4e5e2;padding:10px}
.rpanel1{width:250px;margin:0px auto;}.rpanel2{margin:0px auto;width:250px;}
.midpanel{width:800px;height:1000px;border:1px solid #e5e4e2;margin:0px auto;background-color:beige}
.middle1{margin:0px auto;width:800px;}.middlemainimg{padding:10px;}.middlemainimg img{margin:10px;width:270px;height:255px}
.middle1r{float:right;width:300px;height:205px;background-color:white;margin-top:-280px;margin-right:10px;padding:20px}
.middle2{margin:0px auto;width:750px;text-align:center;margin-top:10px;margin-bottom:5px}
.middle3{margin:0px auto;width:600px;margin-top:15px}
.middle4{margin:0px auto;padding:10px;margin-top:0px;float:left;margin-top:10px;margin-left:10px;width:250px}
.middle4r{margin-left:300px;width:470px;background-color:white;height:170px;margin-top:40px}
.middlelast{margin:0px auto;width:750px;height:250px;background-color:white;margin-top:20px;padding:20px;text-align:center;}
.middlelast img{margin-left:30px;width:120px;height:90px;}
.bottompanel{clear:both;width:1200px;height:100px;border:1px solid #e5e4e2;text-align:center;background-color:#cccccc}
.bottompanel ul li{display:inline;margin:10px}
.imgcar {width:140px;height:60px;padding:2px;border:2px solid grey;cursor:pointer;}
#carousel {
width: 600px;
overflow:hidden;
height:75px;
background-color:white;
}
#carousel ul {
width: 1600px;
padding: 3px;
margin: 0;
height:75px;
}
#carousel ul li {
width:750px;
text-align: center;
height: 30px;
list-style: none;
float: left;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>NA Plots on Murbad-Karjat Highway</title>
<meta name="title" content="NA Plots on Murbad-Karjat Highway" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="application-name" content="Landshoppe.com - The Free Property Site" />
<meta name="msapplication-tooltip" content="Landshoppe.com - The Free Property Site" />
<meta name="msapplication-window" content="width=1500;height=900" />
<meta name="msapplication-task"
content="name=Search property;action-uri=http://www.landshoppe.com/;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta name="msapplication-task"
content="name=Property Search;action-uri=http://www.landshoppe.com/searchdetails;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta name="msapplication-task"
content="name=Property Registration;action-uri=http://www.landshoppe.com/registration;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta name="msapplication-task"
content="name=Landshoppe Log in;action-uri=http://www.landshoppe.com/Login;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="msvalidate.01" content="8206EB8E37D990E86837A5ED472D65A3" />
<meta name="author" content="landshoppe" />
<meta name="copyright" content="" />
<meta http-equiv="Reply-to" content="anit@landshoppe.com" />
<meta name="ROBOTS" content="noodp,INDEX,FOLLOW" />
<meta name="creation_Date" content="09/30/2012" />
<meta name="revisit-after" content="1 days" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta name="copyright" content="Landshoppe" />
<meta name="classification" content="Real Estate, Properties, Real Estate Agents, Search Property Online" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" />
<link rel="apple-touch-icon" href="image1013.png" />
<link rel="stylesheet" href="project.css" type="text/css" />
<link rel="stylesheet" href="project.css" type="text/css" media="print" />
<link rel="stylesheet" href="project.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="project.css" type="text/css" media="only screen and (max-device-width: 480px)" />
<link rel="alternate" type="application/rss+xml" title="LANDSHOPPE RSS Feed" href="http://www.landshoppe.com/feed.xml" />
<link href='apple_image1013.JPG' rel='apple-touch-icon' />
</head>
<body>
<!-- <script type="text/javascript" src="jav.js"></script>-->
<!--[if lte IE 6]>
<div id="warning">
<h4 class="red">Your Browser Is Not Supported!</h4><br>
<p>Please upgrade to <a href='http://getfirefox.com'>FireFox</a>, <a href='http://www.opera.com/download/'>Opera</a>, <a href='http://www.apple.com/safari/'>Safari</a> or <a href='http://www.microsoft.com/windows/downloads/ie/getitnow.mspx'>Internet Explorer 8 or above</a>. Thank You! <a href="#" onClick="document.getElementById('warning').style.display = 'none';"><span class='bold'>Close Window</span></a></p>
</div>
<![endif]-->
<!--[if lte IE 7]>
<div id="warning">
<h4 class="red">Your Browser Is Not Supported!</h4>
<p>Please upgrade to <a href='http://getfirefox.com'>FireFox</a>, <a href='http://www.opera.com/download/'>Opera</a>, <a href='http://www.apple.com/safari/'>Safari</a> or <a href='http://www.microsoft.com/windows/downloads/ie/getitnow.mspx'>Internet Explorer 8 or above</a>. Thank You! <a href="#" onClick="document.getElementById('warning').style.display = 'none';"><span class='bold'>Close Window</span></a></p>
</div>
<![endif]-->
<div class="container">
<div class="toppanel">
<a href="index.htm" title="The Free Property Website">
<img src="logo.jpg" alt="The Free Property Website" style="float:left;margin:10px;width:150px;height:80px" />
</a>
<a href="index.htm" title="Best Real Estate Website">
<img src="image1013.png" alt="Best Real Estate Website" style="float:right;margin:10px;width:150px;height:80px" />
</a>
<h1>Landshoppe</h1>
<h3>The Property Destination</h3></div>
<div class="lpanel">
<div>
<h3>Landshoppe</h3>
</div>
<div>
<p>Established in 2009 as an offline Real Estate Agency, Landshoppe became a Free Real Estate portal in 2010 to cater to
the online demand for quick and easy property search/sale and rentals. Indigenously developed, the portal has evolved
continously - offering online and offline real estate services.</p>
</div>
<div class="lpanel2">
<h3>Other Projects</h3>
<ul>
<li>Project 1
<br />Location 1</li>
<li>Project 2
<br />Location 2</li>
<li>Project 3
<br />Location 3</li>
</ul>
</div>
</div>
<div class="rpanel">
<div class="rpanel1">
<!-- <iframe width="260" height="250" frameborder="0" marginheight="0" marginwidth="0"
scrolling="no" src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=&q=Thane&aq=&sll=18.815427,76.775144&sspn=7.710738,15.644531&ie=UTF8&hq=&hnear=Thane,+Maharashtra&ll=19.218331,72.97809&spn=0.240504,0.488892&t=m&z=11&iwloc=A&output=embed"></iframe><br />
<small><a href="https://maps.google.co.in/maps?f=q&source=embed&hl=en&geocode=&q=Thane&aq=&sll=18.815427,76.775144&sspn=7.710738,15.644531&ie=UTF8&hq=&hnear=Thane,+Maharashtra&ll=19.218331,72.97809&spn=0.240504,0.488892&t=m&z=11&iwloc=A" style="color:#0000FF;">View Larger Map</a></small>-->
<h3>Property Address</h3>Mr Parhar
<br />9322633301 | parharbt@yahoo.com
<br />www.parharestate.com</div>
<div class="rpanel2">
<h3>Contact Us</h3>
<form action="" method="post">
<input type="hidden" name="toemail" value="parharbt@yahoo.com" />
<input type="hidden" name="title" value="Mr" /> Message
<br />
<textarea name="message" rows="10" cols="28"></textarea>
<br />Name :
<input type="text" name="fname" />
<br />Mobile :
<input type="text" name="fmob" />
<br />Email :
<input type="text" name="fmail" />
<br />
<input type="submit" name="msgsub" value="Send Message" /></form>
</div>
</div>
<div class="midpanel">
<div class="middle1">
<div class="middlemainimg">
<img src="upload/New-Real-Estate-Projects-in-Murbad%20Karjat-7148Parhar9322633301.jpg"
alt="NA PLOTS ON MURBAD-KARJAT HIGHWAY" />
</div>
<div class="middle1r">
<h3>Na Plots On Murbad-karjat Highway</h3>
<p>Available for sale on Murbad -Karjat Highway. NA Sanctioned Plots with Cement Pole Fencing with gate for each Plot.
Electricity line available till each Plot.Rate 240-PSF Plot size 4475 sq feet</p>
</div>
</div>
<div class="middle2">
<h3>Project Highlights</h3>* The Best Free Real Estate Website
<br />* All properties and Property Related Services Available here
<br />* Blogs and Question/Answers forums
<br />* Free Member Pages and Project Pages</div>
<div class="middle3">
<div id="carousel">
<ul>
<li>
<img src="image1272.jpg" alt="image1272.jpg" class="imgcar" />
<img src="image1526.jpg" alt="image1526.jpg" class="imgcar" />
<img src="image1574.jpg" alt="image1574.jpg" class="imgcar" />
<img src="image1077.jpg" alt="image1077.jpg" class="imgcar" />
<img src="image7251.jpg" alt="image7251.jpg" class="imgcar" />
</li>
<li>
<img src="image1272.jpg" alt="image1272.jpg" class="imgcar" />
<img src="image1526.jpg" alt="image1526.jpg" class="imgcar" />
<img src="image1574.jpg" alt="image1574.jpg" class="imgcar" />
<img src="image1077.jpg" alt="image1077.jpg" class="imgcar" />
<img src="image7251.jpg" alt="image7251.jpg" class="imgcar" />
</li>
</ul>
</div>
<!-- <div id="viewer">
<div><h3>Swimming Pool <br>(<span class="pointer" id="closev1" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/pool_sunrise.jpg" alt="Swimming Pool" /></div>
<div><h3>Star Gazing <br>(<span class="pointer" id="closev2" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/star-gazing.gif" alt="Star Gazing" /></div>
<div><h3>Passage <br>(<span class="pointer" id="closev3" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/welcome3.jpg" alt="Passage" /></div>
<div><h3>Bon Fire <br>(<span class="pointer" id="closev4" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/bonfire.jpg" alt="Bonfire" /></div>
<div><h3>Wash Room <br>(<span class="pointer" id="closev5" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/washroom.jpg" alt="Wash Room" /></div>
<div><h3>Pool and Accomodation <br>(<span class="pointer" id="closev6" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/room_pool.jpg" alt="Pool and Accomodation" /></div>
<div><h3>Lake <br>(<span class="pointer" id="closev7" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/lake.jpg" alt="Lake" /></div>
<div><h3>Bed <br>(<span class="pointer" id="closev8" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/bed.jpg" alt="Bed" /></div>
</div>-->
</div>
<div class="middle4">
<h3>Locality Highlights</h3>
<img style="margin:0px auto" src="locationmap.png" width="150" height="100" />
</div>
<div class="middle4r">
<h3>Distances to nearby facilities</h3>* Railway Station : _ Km/s
<br />* Hospital : _ Km/s
<br />* School : _ Km/s
<br />* Market : _ Km/s
<br /></div>
<div class="middlelast">
<h3>Property View</h3>
<img src="image12701.jpg" alt="image12701.jpg" />
<img src="image12741.jpg" alt="image12741.jpg" />
<img src="image15841.jpg" alt="image15841.jpg" />
<img src="image15911.jpg" alt="image15911.jpg" /></div>
</div>
<div class="bottompanel">
<ul>
<li>About us</li>
<li>Contact us</li>
<li>Our offices</li>
<li>Sites</li>
</ul>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jav2.js"></script>
</body>
</html>
是FLOAT格式吗?因为左右浮动都搞砸了。我搜索了很多,但无法弄清楚可能是什么原因?它在我的本地机器和服务器上也表现不同!在本地机器中,右/左浮动不起作用,在服务器上,中间div在右/左div之后布局。
在服务器上,我的IE6和IE7警告也在IE9上出现了!
网址
答案 0 :(得分:0)
您需要清除lpanel
。 toppanel
上的图像正在影响浮动。
<div class="lpanel" style="clear: both;">
不要在生产中使用内联样式。
@Spudley提到你的代码中有<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
,请注意,这不应该用于生成新网站,它旨在帮助保留旧的非标准兼容网站(即为了容纳bug而构建)在旧版本中)在较新版本的IE中工作。