css 在 ie 9 中的错误行为

标签 css internet-explorer-9 css-float

我的 CSS 在 W3C 上验证，我有适当的容器 div 和子 div，并且在子 div 中有 float 元素。

以下 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!&nbsp;&nbsp;&nbsp;<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!&nbsp;&nbsp;&nbsp;<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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Thane&amp;aq=&amp;sll=18.815427,76.775144&amp;sspn=7.710738,15.644531&amp;ie=UTF8&amp;hq=&amp;hnear=Thane,+Maharashtra&amp;ll=19.218331,72.97809&amp;spn=0.240504,0.488892&amp;t=m&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe><br />
                                <small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Thane&amp;aq=&amp;sll=18.815427,76.775144&amp;sspn=7.710738,15.644531&amp;ie=UTF8&amp;hq=&amp;hnear=Thane,+Maharashtra&amp;ll=19.218331,72.97809&amp;spn=0.240504,0.488892&amp;t=m&amp;z=11&amp;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 上抛出!

网址

http://www.landshoppe.com/project-page?dafid=30

最佳答案

您需要清除 lpanel . toppanel 上的图片正在影响花车。 

<div class="lpanel" style="clear: both;">

不要在生产中使用内联样式。

@Spudley 提到你有 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />在您的代码中，请注意，这绝不应该用于新站点的生产，它旨在帮助保持旧的非标准兼容站点(即为适应旧版本中的错误而构建)在较新版本的 IE 中工作。

关于css 在 ie 9 中的错误行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18051380/

上一篇：jquery 选项卡菜单不起作用

下一篇：jquery - 使用Fotorama控件时如何设置原图的高宽？

相关文章：

javascript - "Security Risk"Yammer 嵌入源在 IE9 中的错误消息

css - float DIV 容器

html - 具有灵活滚动溢出的两列

javascript - Cufon 脚本在 IE9 下不起作用

javascript - 如何在 IE9 中将 Enter 转换为 Tab(焦点改变)？它适用于 IE8

CSS:以奇怪的顺序 float DIV？

css - 如何使我的图像标题网格在不同大小的文本内容下正确 float

javascript - 将 HTML 范围输入轨道划分为多个部分

CSS:如何在表格行上设置边框底部，最后一行除外

jquery - 除非我指定高度，否则 Div 不会在屏幕上居中

©2024 IT工具网  联系我们