Question

我的页面有问题。它使用CSS浮动。在IE8和6以及Firefox，Chrome等一切看起来都不错，但在IE7中，底部的3个框“浮动”在一些主要内容框之上。我不能为我的生活弄清楚如何制止这一点。香港专业教育学院尝试了一些事情，例如添加明确：两者;在主要内容div下面，还有不同的overflow：命令，看看它是否有效但是没有用。

链接为http://www.clickaccident.co.uk/accidentsv2/about.html

html是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Click Accidents</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
</head>
<body>
<!-- Wrapper Start -->
<div id="pagewrapper">
      <!-- Header Start -->
      <div id="header">
            <div class="header_r">Call to speak to one of our advisors now: 0800 <br />
              <br />
              Text Click to 83336 for a call back.
<br />
                  <span></span> </div>

            <div class="logo"><img src="images/logo.png" width="209" height="70" alt="Click Accidents Logo" /></div>
      </div>
      <!-- Header End -->
      <div class="clear" />
</div>
<!-- Navigation Start -->
<div id="menu">
      <ul class="navigation">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="#">Whats it Worth?</a></li>
            <li><a href="#">10 Easy Steps</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
      </ul>

<div id="top-title">
<h3>Specialist Accident Compensation Solicitors.</h3>
</div>
</div>
<!-- Navigation End -->

<div class="clear"></div>
<div class="homebox2">
    <div class="homebox-left4">
        <h1><span>&nbsp;About Us</span></h1>
        <p>Click accidents is the specialist online accident and injury claim service brought to you by Barnetts Solicitors.</p>
        <p>With over 20 years specialist accident and compensation experience, Barnetts is a firm you can trust.</p>
        <p>Barnetts Solicitors was established in 1980, and has grown to be one of the top accident compensation firms in the UK, prividing professional specialist accident claim and legal services to clients throughout the UK and abroad </p>
        <p>Unlike online "claims management companies", we are solicitors regulated by the Solicitors Regulation Authority (Registration Number 67445) and have no "middle men" or high pressure sales people. We pride ourselves on a reliable, friendly and professional service.</p>
</div>
<div class="homebox-right">
    <div class="quoteboxtop" style="height: 8px"></div>
          <div id="traffic"><a href="road-traffic.html">Road Traffic Accidents</a></div>
          <div id="slipstrips"><a href="slips-trips.html">Slips, Trips &amp; Falls</a></div>
          <div id="work"><a href="work-related.html">Work Related Illness &amp; Injuries</a></div>
      <div id="medical"><a href="medical-dental.html">Medical/Dental Mistakes</a></div>
          <div id="accidentsabroad"><a href="accidents-abroad.html">Accidents Abroad</a></div>
          <div id="faultyequipment"><a href="defective-product.html">Faulty Equipment</a></div>
          <div id="solsmistakes"><a href="solicitor-mistakes.html">Other Solicitors Mistakes</a></div>
  </div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div style="clear:both;"></div>
<!-- Content Start -->
<div id="content">
<div class="onlinequote" style="height: 144px"><br />
<br />
    <div class="boxtext2">
        <strong>Compensation</strong><br />
  <a href="whats-it-worth.html">What are my Injuries worth?</a></div>
</div>
<div class="testimonials" style="height: 133px">
<div class="boxtext3">
  <h2><br />
    <br />
  </h2></div>
<div style="text-align:center; color:#fff">
  <strong>Mr A Ahmed</strong>
  Click Accidents Injury people were so professional. The service was efficient and very friendly.
</div>
</div>
<div class="phoneadvisor" style="height: 144px"><br />
<br />
<div class="boxtext"><strong>0800 066 5021</strong>
    <br />
    Contact us for a free no obligation discussion.<br />
</div>

</div>
<div class="liveadvisor" style="height: 144px"><br />
<br />
<div class="boxtext"><strong>Live Support</strong><br />
  Speak to someone online now.
  <br />
</div>

</div>
<div class="clear"></div>
<div class="bottombar" style="height: 153px"></div>
</div>
  <!-- Right Content End -->

  <div class="clear"></div>

<!-- Content End -->
<div class="clear"></div>
<!-- Bottom Bar Content Start -->
<!-- Footer Start -->
<div id="footerbg">
      <div id="footer">
            <ul class="navigation c5">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Whats it Worth?</a></li>
            <li><a href="#">10 Easy Steps</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            </ul>
            <br />
            <br />
            <div id="copyrights" class="leftalign">
            ClickAccidents.co.uk is a trading name of Barnetts Solicitors (vat no. 325 0540 94)
            <br/>
            Regulated by the Solicitors Regulation Authority (SRA Number 67445).
            <br/>
            &copy; Barnetts Solicitors 2009 | All rights reserved 
            </div>
      </div>
      <!-- Footer End -->
</div>
<!-- Wrapper End -->
</body>
</html>

感谢任何帮助：）

Answer 1

为什么不尝试不设置#menu css的宽度，因为宽度可以由内部内容的大小决定。

（或）

首先在左边做一个浮动＃top-title然后向右浮动.navigation。让我知道它是否解决了你的问题

Answer 2

我刚刚删除了所有主容器上的固定高度，现在工作得很好。对于将来的任何人，请尝试从div中删除所有固定高度，并让内容创建

IE7 CSS Float问题

2 个答案: