CSS和Internet Explorer

Question

I struggle with working with Internet Explorer. 我无法使用Internet Explorer。

Issue one: 问题一：

I have used min-height:100% and I no that this does not work in IE. 我已经使用了min-height:100% ，但我不认为这在IE中不起作用。 How could I set the "min-height" in my css? 如何在CSS中设置“最小高度”？

Issue two: 问题二：

I have used 我用过

position: relative;
    z-index:50000;`

for my header and now its not aligned where it is required. 我的标头，现在没有对齐。

I have shiv installed 我已经安装了Shiv

The link to the site is http://buddywalknz.org 该网站的链接为http://buddywalknz.org

HTML (With CMS Tags) 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: 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;
}

Answer 1

min-height does work in IE7 and later, but does not work in IE6. min-height在IE7和更高版本中有效，但在IE6中不起作用。 Since IE6's usage is minimal, you should consider just ignoring it. 由于IE6的用法很少，因此您应该考虑忽略它。

You have this code: 您有以下代码：

<!--[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]-->

Get rid if the first block, you only need the second. 如果第一个块摆脱了，您只需要第二个。 This is what includes two copies of html5shim in IE7. 这就是在IE7中包含html5shim的两个副本的过程。

Answer 2

It's a barbaric -- and probably outdated -- solution, but IE does respect image bounds. 这是一个野蛮的解决方案，而且可能已经过时了，但是IE确实尊重图像边界。 Create a 1x1-px transparent GIF or PNG, stick it in your space with a height. 创建一个1x1像素的透明GIF或PNG，将其高空粘贴在您的空间中。

This will give you one pixel of shim too (call it leading if you want to be fancy) so make sure you adjust your CSS around that. 这也会给您一个垫片的像素（如果您想花哨的话可以称其为领先），因此请确保围绕它调整CSS。

CSS和Internet Explorer

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-11-07 04:36:10

解决方案2
0 2011-11-07 04:37:52

CSS和Internet Explorer

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-11-07 04:36:10

解决方案2 0 2011-11-07 04:37:52

解决方案1
1 已采纳 2011-11-07 04:36:10

解决方案2
0 2011-11-07 04:37:52