0

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

这是它的外观,取自 webkit/chromium 浏览器。 它应该是什么样子(Webkit/Chromium 浏览器)

这是 Internet Explorer 认为它应该看起来的样子...... 网站目前在 Internet Explorer 浏览器中的外观

该网页可在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)提出建议,我将非常感激。

4

2 回答 2

0

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

于 2012-04-10T16:10:59.017 回答
0

div 溢出的默认值是可见的,因此在 CSS 中声明它不会有任何效果,除非您从其他地方覆盖它。

尝试使用溢出:隐藏;在 #ct 和 #col2 上,因为这应该清除右侧的浮动列。

于 2012-04-10T15:42:43.890 回答