2012-04-10 115 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