2012-04-10 113 views
0

我有一个背景的div随机切断在Internet Explorer中的麻烦......DIV随机切断在IE

这是应该的样子,从WebKit的/ Chromium浏览器采取了.. 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)建议,我将非常谢天谢地了。

+1

哪个版本的IE?你可以尝试用'_height:1%','position:relative'或'zoom:1'来触发hasLayout。 – powerbuoy 2012-04-10 15:34:20

+0

你有没有尝试过使用overflow:hidden;而不是溢出:可见;为ct我不知道如果IE浏览器喜欢溢出:可见... – hcharge 2012-04-10 15:37:09

+0

你也可以把溢出:隐藏在与col2的id的div – hcharge 2012-04-10 15:39:06

回答

0

div溢出的默认值是可见的,因此在CSS中声明它将不会产生任何效果,除非您从别处覆盖它。

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

+0

好吧,我已经尝试了overflow:visible和overflow:hidden,没有“ct”div似乎在名为“ftcol2foll”的div底部切断(我通过向ftcol2foll添加文本使其更大来检查此问题,并且“ct”扩展至“ftcol2foll”的底部边距。但我不认为这应该发生,因为所有三个浮动元素(div“ftcol2off,ftcol2foll和ftcol2news)都在一个称为col2的div中... – 2012-04-10 15:55:49

0

这将有助于了解显示此问题的ie浏览器的确切版本。我在ie 7和Firefox中测试了该站点,并且无法复制该问题。在IE7中,div并没有被切断,但是你也没有不透明。我会建议详细说明一下,因为它可能是一些兼容性问题。迄今为止所有的评论和回答都是猜测,因为我们没有确定根本原因所需的全部信息。

+0

这是IE9我测试它来解决这个问题。由一个小的PNG瓦作为背景(重复) – 2012-04-10 16:27:03