2011-11-07 146 views
0

我在使用Internet Explorer时遇到困难。CSS和Internet Explorer

问题之一:

我用min-height:100%,我没有,这并不在IE浏览器。我怎么能在我的CSS中设置“最小高度”?

问题二:

我用

position: relative; 
    z-index:50000;` 

我的头,并在那里现在需要的不对齐。

我有SHIV安装

该网站的链接是http://buddywalknz.org

HTML(CMS的标签)

<!DOCTYPE html> 
<head> 
    {pyro:theme:partial name="metadata"} 
<body> 
     <header> 
      <div id="logo"></div> 
     </header> 

      <nav> 
       <ul> 
        {pyro:navigation:links group="header" indent="tab"} 
       </ul> 
      </nav> 

<div id="mainContent"> 
    {if ('{pyro:page:is_home}' == TRUE)} 
    <h1>Welcome</h1> 
    {else} 
    <h1>{pyro:page:title}</h1> 
    {/if} 
    <p> 
    {pyro:page:body}  
    </p> 
     <div id="gallery"> 
       <div id="galleryMain"><img src="http://buddywalknz.org/uploads/default/files/accouncil_s.jpg" width="375" height="149" title="Proudly Supported by Auckland Council" alt="Auckland Council"></div> 
      {pyro:streams:cycle stream="sponsors"} 
      {entries} 
       <div class="galleryLogo"><a href="{company_website}"><img src="{company_logo.thumb}" title="Proudly Supported by {company_name}" alt="{company_name}"></a></div> 
      {/entries} 
      {/pyro:streams:cycle} 
     </div> 
</div><!-- Main Content Close --> 
    </body> 
</html> 

CSS:

html{ 
    background: url('../img/Body_BG.png') repeat-x 0 0 scroll; 
    background-color:#0C0C0C; 
    height:100%; 
    width:100%; 
} 
body{ 
    width:960px; 
    height:100%; 
    min-height: 100% !important; 
    margin: 0 auto; 
    font-family:Verdana, Geneva, sans-serif; 
} 
h1{ 
    margin:25px 0 0 25px; 
    font-family: 'Quicksand', sans-serif; 
    font-size:30px; 
} 
header{ 
    height: 219px; 
    width: 551px; 
    margin:0 auto; 
} 
header #logo{ 
    background:url('../img/logo.png') no-repeat scroll 0 0 transparent; 
    width:551px; 
    height:219px; 
    position: relative; 
    z-index:50000; 
} 
nav{ 
    background:url('../img/navBG.png') no-repeat; 
    float:right; 
    width:135px; 
    height:100%; 
    padding:30px 0 0 0; 
} 
nav ul{ 
    list-style:none; 
    margin:15px 0 0 0; 
} 
nav li{ 
    margin:10px 0 0 -30px; 
    text-align:left; 
    text-indent:5px; 
} 
nav li a{ 
    text-decoration:none; 
    color:#ff9f30; 
    font-family: 'Quicksand', sans-serif; 
} 
#mainContent{ 
    float:right; 
    background:url('../img/mainBG.png') no-repeat; 
    width:707px; 
    height:auto; 
    min-height:100%; 
    margin:-35px auto; 
} 
#mainContent h1{ 
    font-family: 'Quicksand', sans-serif; 
} 
#mainContent a{ 
    color:#ff9f30; 
    font-weight:bold; 
    text-decoration: none; 
} 
#bottomBanner{ 
    background: url('../img/bottomBanner.png') no-repeat; 
    width:478px; 
    height: 47px; 
    margin: -47px 0 0 300px; 
} 
#mainContent p{ 
    margin:0 30px 0 30px; 
    font-size: 13px; 
    text-align:justify; 
} 

#Video{ 

    margin: 30px 0 0 150px; 

} 

#Video #Vid{ 

    border: 5px solid #4e2b97; 
} 

.img{ 

    border: 5px solid #ff9f30; 
} 


a { 
    outline: none; 
} 

a img { 
    border: 1px solid #BBB; 
    padding: 2px; 
    margin: 10px 20px 10px 0; 
    vertical-align: top; 
} 

a img.last { 
    margin-right: 0;  
} 

ul { 
    margin-bottom: 24px; 
    padding-left: 30px; 
} 


#img{ 

    margin-left: 25px; 
} 

#map{ 
    margin:0 0 0 115px; 
} 

/* Sponsor Gallery CSS */ 
#gallery{ 
    width:707px; 
    min-height: 100% !important; 
    margin:0 0 0 30px; 
} 
#galleryMain{ 
    margin:0 0 0 150px; 
} 
.galleryLogo{ 
    float:left; 
    width:200px; 
    height:200px; 
    margin:0 8px 5px 0; 
} 
#galleryLogo img{ 
    border:none; 
} 
#galleryLogo a{ 
    border:none; 
    text-decoration: none; 
} 
/* End Sponsor Gallery CSS */ 

#contact-form{ 
    width:350px; 
    margin:10px auto; 
} 

#contact-form label{ 
    float:left; 
    width:175px; 
} 
#contact-form input{ 
    width:175px; 
} 
+1

你知道你错过了一个关闭''标签吗? –

+0

我们在这里谈论什么版本的IE? IE的最小高度技巧:http://www.dustindiaz.com/min-height-fast-hack/至于你的标题设置,z-index不应该改变它的位置。是不是位置:在你改变它之前是相对的? –

+0

@MystereMan谢谢:) –

回答

1

最小高度在IE7及更高版本中可以正常工作,但在IE6中不起作用。由于IE6的使用很少,你应该考虑忽略它。

你有这样的代码:

<!--[if lt IE 8]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

摆脱在第一块,你只需要在第二位。这是在IE7中包含两个html5shim副本的内容。

+0

仍然没有解决我的问题http://cl.ly/3s3t3p391x1h2S2j2a1I白色应该在导航(紫色)结尾 –

+0

@JessMcKenzie - 这真的很困难知道什么是只通过截图。您提供的HTML无效,因为我们没有图像。 –

0

这是一个野蛮 - 也许是过时的解决方案,但IE确实尊重图像边界。创建一个1x1-px透明的GIF或PNG,将其粘贴在您的空间中,并保持一定的高度。

这也会给你一个像素的垫片(如果你想要看起来称为领先),所以确保你调整你的CSS。