DIV在IE中随机切断

时间:2012-04-10 15:30:56

标签: css internet-explorer html

我遇到了在Internet Explorer中随机切断背景div的问题......

以下是它应该是什么样子,取自webkit / chrome浏览器.. How it should look (A Webkit/Chromium Browser)

以下是Internet Explorer认为应该如何... What the website looks like at the moment in a Internet Explorer Browser

可以在http://beta.surrealholidays.com找到该网页。 如何解决这个问题的任何反馈将不胜感激。

HTML来源:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="/css/alt.css" rel="stylesheet" type="text/css">
<meta name="robots" content="all">
<meta name="author" content="surrealholidays.com">
<meta name="robots" content="index,follow">
<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<link rel="shortcut icon" href="http://www.surrealholidays.com/images/logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script src="/js/flash.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

<title>Welcome to Surreal Holidays</title>
</head>
<body class="oneColFixCtr">
<div id="bannerph">
<div id="bannerint">
  <div id="logoph" align="left">
    <p><img src="/images/logos/newlogo.png" width="204" height="99" alt="Site Logo"></p>
  </div>
  <div id="callus" align="right">
    <p><br>
      Call Us:</p>
    <h1>0845 003 5043</h1></div>
  <p>&nbsp;</p>
</div>
</div>
<div id="page">
<div id="links">
<a href="/">Homepage</a> &nbsp; &nbsp;<a href="/destinations">Luxury Destinations</a>&nbsp; &nbsp;<a href="/tours">Private Tours</a>&nbsp; &nbsp;<a href="/terms/">Terms & Conditions</a>&nbsp; &nbsp;<a href="/enquire">Enquire</a>&nbsp; &nbsp;<a href="/news">News</a>&nbsp; &nbsp;<a href="/contact">Contact Us</a></div>
<div id="ct">



<div id="navig">
  <div class="c2 c1" id="navi_direc">
    <div align="left">Homepage &gt;</div>
  </div>
  <div id="navi_newsl"> <a href="/newsletter/index.html">Subscribe</a> to our Latest Offers</div>
</div>
<div id="img">
  <p><img src="/images/mainstory.jpg" width="995" height="400">&nbsp;</p>
</div>
<div id="content">
<div id="hp_welcome">
<h2 align="left">Private Luxury Escorted Tours in Thailand </h2>
<p align="left">&nbsp;</p>
<p align="left" class="c2"><strong>At Surreal Holidays, you can really feel the passion for Thailand. From the first moment you contact our experienced team, you will be amazed by the in-depth local knowledge and deep love of the country and its people that you encounter. Not surprising! Some of us were born and raised in Thailand before moving to the UK. You will find we have a unique ability to understand how travellers from the UK can experience the best Thailand has to offer. No ordinary travel company, Surreal Holidays can tailor a holiday especially for you. Along the way, your experience will be enhanced by our high levels of customer service and thoughtful personal touches.</strong></p>
<p class="c2">&nbsp;</p>
<h2 align="left" class="c3"><strong>Bespoke Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>Our founder's inspiration: "..like you, when I travel, I use all my senses to enhance the experience. This often leads to a "surreal" feeling, as though the holiday is a dream like state where the strange and bizarre juxtaposition with the calm and beautiful. Nowhere epitomises this more than Thailand, my homeland. Whether you are looking for an inspirational island hopping itinerary or romantic wedding and honeymoon locations, soft adventure activities or cultural experiences, you need look no further. Thailand offers much more than just a place to relax on a beach. You can discover unique flora and fauna, stunning marine parks, and breathtaking scenery at every turn. Indeed, there really is something for everyone in our Amazing Thailand."... Runci Weeden</strong></p>
<p align="left" class="c2">&nbsp;</p>
<h2 align="left" class="c3"><strong>Unique Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>To find out more information on our Escorted Tour Holidays, including Nature Tours, Cultural Tours or Adventure Tours to Thailand, call 0845 003 5043 and speak to our friendly team.</strong></p>
<p align="left" class="c2">&nbsp;</p>
</div>
<div id="col2">
<div id="hp_ftcol2off">
<h3 align="center"><strong>Our Latest Offers</strong></h3>
<p align="center">&nbsp;</p>
<p align="center">
<h3>Offers Coming Soon!</h3>
</p>
<p align="center">&nbsp;</p>
<h3 align="center">Layana Resort and Spa<br>
  From £89 pppn
</h3>
<p>&nbsp;</p>
</div>
<div id="hp_ftcol2foll">
  <h3>Follow Us</h3>
  <p align="center" class="c2"><a href="https://www.facebook.com/SurrealHolidays"><img src="/images/social_icons/facebook.png" alt="Find us on Facebook" width="64" height="64" border="0"></a><a href="https://twitter.com/#!/surrealholidays"><img src="/images/social_icons/twitter.png" alt="Follow us on Twitter" width="64" height="64" border="0"></a><a href="https://plus.google.com/u/0/115488031855843811543/posts"><img src="/images/social_icons/google.png" alt="Find us on Google Plus" width="64" height="64" border="0"></a><a href="http://www.youtube.com/surrealholidays"><img src="/images/social_icons/youtube.png" alt="Watch us on Youtube" width="64" height="64" border="0"></a><a href="http://vimeo.com/surrealholidays"><img src="/images/social_icons/vimeo.png" alt="Watch us on Vimeo" width="64" height="64" border="0"></a><br>
    <br>
  </p>
</div>
<div id="hp_ftcol2news">
<h3><strong>Latest News</strong></h3>
<h3>20 March 2012</h3>
  <h3><u><strong>Welcome To Our New Website!</strong></u>
    <br>
    We have now launched our brand new website, for an improved compatability for Tablet Devices, as well as a much faster loading speed for a enhanced browsing experience. For more information about this update, <br>
    <u>Click Here</u>.</h3>
<p>&nbsp;</p>
<p align="center" class="c2"><br>
  <br>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="f_tr">
<br>
Tel: 0845 003 5043 (Local Rates from a BT Landline) , 01628 685 550<br>
<strong>&copy; Surreal Holidays Ltd. 2009-2012 All Rights Reserved.</strong><br>
<div id="f_php">
  <div id="f_ph1"><img src="/images/logos/logo-amazing.png" width="145" height="45" alt="Thailand"></div>
<div id="f_ph2">
  <p>Surreal Holidays is the Trading Name of Surreal Holidays Ltd. Company Number: 06690344<br>
    <a href="/disclaimer">Disclaimer</a> | <a href="/privacypolicy">Privacy Policy</a> | <a href="/copyright">Copyright</a></p>
</div>
<div id="f_ph3">
<img src="/images/logos/logo-atol.png" width="45" height="45" alt="A"><img src="/images/logos/logo-atta.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</div>
</div>
</div> <!-- Closing Tags For #Footer -->
</div>
</body>
</html>

这是样式表:

@charset "utf-8";
/* CSS Document */
a:link {
    color: #fff;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #fff;
}
a:hover {
    text-decoration: underline;
    color: #fff;
}
a:active {
    text-decoration: none;
    color: #fff;
}

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background: url(/images/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#page {
    width:995px;
    margin: 0 auto;
    padding: 0px;

}

#ct {
    background-image:url(/images/bg.png);
    overflow:visible;
}

#bannerph {
    width: 100%;
    background-image:url(/images/banner.png)    
}
#bannerint {
    width: 995px;
    height: 140px;
    padding: 10px;
    margin: 0 auto;

}
#logoph {
    width: 300px;
    float: left;
    padding: 10px;
}

#callus {
    width: 500px;
    float: right;

}
#links {
    background-image: url(/images/logos/li.jpg);
    background-repeat: repeat-x;
    color: #fff;
    vertical-align: middle;
    padding: 10px;
    margin-bottom: -2px;
    }

#linkblock{
    padding: 10px;
}

#navig {
    height: 30px;
    width: 995px;
    padding: 10px;
}

#navi_direc{
    float:left;
    width: 500px;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
}

#navi_direc a {
    color: #000
}

#navi_newsl{
    float: right;
    width: 449px;
    font-size: 12px;
}

#content {
    height: auto;
    background-image: url(/images/mainbggrad.jpg)
    font-size: 12px;
    overflow:hidden;
}
#content h2 {
    font-size: 18px;
    color: #7d6543;
    font-weight: bold;
    line-height: 22px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
}
#content h3 {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    line-height: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
}
#content h4 {
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
    color: #8A5D3C;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
}
#content h5 {
margin: 0px;
font-size: 12px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
padding-left: 10px;
padding-right: 10px;
}
#col2 {
    line-height: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 12px;
    color: #FFF;
}
#content p {
    line-height: normal;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 12px;
    color: #000;
}
#hp_welcome{
    width: 550px;
    float:left;
    padding: 10 px;
    color: #7d6543;
}
#hp_ftcol2off {
    width:380px;
    float:right;
    margin: 10px 10px 0 10px;
    background-image: url(/images/logos/news.jpg);
    background-repeat: repeat-y;
    border-radius: 10px;
}
#hp_ftcol2news {
    width:380px;
    float:right;
    margin: 10px 10px 10px 10px;
    background-image: url(/images/logos/news.jpg);
    background-repeat: repeat-y;
    border-radius: 10px;
    color: #FFF;
}

#hp_ftcol2foll {
    width:380px;
    float:right;
    margin: 10px 10px 10px 10px;
    background-image: url(/images/logos/news.jpg);
    background-repeat: repeat-y;
    border-radius: 10px;
    color: #FFF;
}
#hp_ftcol2off table tr td {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
#container_hp{
    width: 995px;
    height: auto;
    overflow:auto;
}
#f_tr{
    height:auto;
}
#f_php{
    width: 995px;
    height: 60px;
}
#f_ph1{
    width:325px;
    float:left;
}
#f_ph2{
    width:340px;
    float:left;
    }
#f_ph3{
    width:325px;
    float:left;
}
#footer {
    font-size: 12px;
    color: #fff;
    background-image: url(/images/logos/ftr.jpg);
    background-repeat: repeat-x;
    height: 150px;
    padding-bottom: -5px;
}

#callus {
    padding-right: 30px;
}

#navi_newsl a:link {
    color: #000;
    text-decoration: none;
}
#navi_newsl a:visited {
    text-decoration: none;
    color: #000;
}
#navi_newsl a:hover {
    text-decoration: underline;
    color: #000;
}
#navi_newsl a:active {
    text-decoration: none;
    color: #000;
}
.oneColFixCtr #bannerint #callus h1 {
    color: #7d6543;
}
.oneColFixCtr #bannerint #callus p {
    color: #7d6543;
}
#warning {
    background-image:url(/images/warning%20bar.png);
    height: 50px;
    background-repeat:no-repeat;
}
#intwarn {
    margin: 13px;
}

#intwarn p {
    color: #fff
}
#warning #intwarn p {
    font-size: 20px;
}
.oneColFixCtr #page #content table {
    text-align: left;
    font-size: 12px;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news {
    color: #FFF;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news p b {
    color: #FFF;
    text-decoration: underline;
}

如果有人建议如何阻止这些div过早地切断(bannerph和ct),我将非常感激。

2 个答案:

答案 0 :(得分:0)

div溢出的默认值是可见的,因此在CSS中声明这一点不会产生任何影响,除非你从其他地方覆盖它。

尝试使用overflow:hidden;在#ct和#col2上,这应该清除右边的浮动列。

答案 1 :(得分:0)

了解显示此问题的浏览器的确切版本会有所帮助。我在ie 7和firefox中测试了该站点,无法复制该问题。在ie7中div没有被切断,但你也没有不透明度。我建议稍微详细说明一下细节,因为它可能是你遇到的一些兼容性问题。迄今为止所有的评论和答案都是猜测,因为我们没有确定根本原因所需的所有信息。