IE显示浮动错误

时间:2011-09-11 20:55:19

标签: html css internet-explorer-8 internet-explorer-9 css-float

我的网站目前在ie7,ie8和ie9的几个页面上打破,当然它在每个浏览器中以不同的方式打破。我一直试图弄清楚这几个小时没有任何东西。

ie7-8中的问题是我认为我的各种元素没有正确浮动,但我不完全确定。

以下是一些screencaps

以下是测试页的链接:testsite

以下是代码:

<?php include("includes/header.html");?>

    <div id="content">      
        <div id="toolbar" class="dropshadow" style="background-color: #181818">
            <h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
            <h2 class="header2">Buyers Tools:<h2>
            <hr noshade color = "#373737"/>

            <ul>
                <li>
                    <a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
                        <img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
                                <h3>Our Vehicles</h3>
                        </a>
                    </li>
                <li>
                    <a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
                        <img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
                            <h3>Shipping</h3>
                        </a>
                    </li>
                <li>
                    <a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
                        <img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
                                <h3>Financing</h3>
                            </a>
                    </li>
                <li>
                    <a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
                        <img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
                                    <h3>Insurance</h3>
                                </a>
                    </li>    
                <li>
                    <a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
                        <img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
                            <h3>Auto Locator</h3>
                        </a>
                    </li>
                </ul>
            </div>

        <div id="searchbox" class="dropshadow">


            </div>

        <div id="advsearch" class="dropshadow">

                </div>




        <div id="links" class="dropshadow" style="background-color: #181818">

            </div>


        </div>
    </div>                   
        <div id="bannerads" class="dropshadow">
            </div>   

以下是特定于此页面的CSS表格。如果您需要网站的主页面,我可以为您提供,但该样式表在其他页面上正常工作,所以我相信问题就在这里。

@charset "utf-8";
/* CSS Document */

#bannerads{
    margin: 9px 0px 5px 6px;
    float: left;
    width: 728px;
    height: 90px;
    padding: 6px 128px;

    background-color: #e9e7e4;
}
#toolbar{
    float: left;
    width: 984px;    
    height: 150px;
    position: relative;
    z-index: 1;
    margin: 0px 6px 0px 6px;
    background-color: #181818;
    background-image: url(../images/toolbar.png);
    background-position:right top;
    background-repeat:no-repeat;
}
#toolbar hr{
    float: left;
    width: 600px;
    margin: 4px 300px 0px 30px
}
#toolbar ul{
    list-style:none;
    padding:0;
}
#toolbar li{
    float: left;
    margin: 10px 0px 0px 31px;
}
#toolbar a{
    color: #e9e7e4;

}
#toolbar a:hover{
    color:#e9e7e4;
    text-decoration:underline;  
}
#searchbox{
    float: left;
    clear: both;
    width: 446px;
    height: 402px;
    background-color: #e9e7e4;
    margin: 9px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}
#toolbar li h3{
    color: #e9e7e4;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 10px;
    text-align:center;
}
#advsearch{
    float: left;
    width: 446px;
    height: 242px;
    background-color: #e9e7e4;
    margin: 9px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}

#links{
    float: left;
    width: 446px;
    height: 132px;
    background-color: #181818;
    margin: 8px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}
#arrow{
    margin-left:-93px;
    width: 68px;
    height: 135px;
    float: left;
    position: relative;
}
.header1{
    color: #e9e7e4;
    font-size: 28px;
    margin: 8px 0px 0px 30px;
    float: left;

}
.header2{
    color: #e9e7e4;
    font-size: 16px;
    float:left;
    margin: 22px 0px 0px 220px;
}

#showinvheader{
    color: #e9e7e4;
    font-size: 14px;
    margin-bottom: -2px;
    text-align:center;
}

最后,这是我用来与ie:

兼容的css表
/* CSS Document */

.Navigation{
    border: solid #181818 1px;
    margin: -15px 5px 0px 5px;
}
.bigbox{
    border: solid #181818 1px;
    margin: 7px 5px 0px 5px;
}
.smallbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
}
#banner{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#headerimg{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#contentbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#bannerads{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#bannerads2{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#toolbar{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#featured{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#searchbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#advsearch{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#links{
    border: solid #181818 1px;
    margin: 7px 5px 0px 5px;
    }

2 个答案:

答案 0 :(得分:2)

嗯,对于初学者来说,你的X-UA兼容标头搞砸了。你有一个奇怪的quot;值。这可能会阻止较新版本呈现为IE7。但是,您应该始终只使用标准模式进行渲染,并使用条件注释对每个浏览器进行细微更改。

如果必须使用x-ua兼容,则应将其作为http标头,而不是元标记。 PHP允许您在开始向客户端写入数据之前添加标题。在那里添加标题。

经过进一步检查,你的代码是..废话。它有180多个验证错误,包括将块级元素放入标题元素中。我建议先将HTML验证,因为无效代码是在不同浏览器上呈现不同内容的首要原因。

http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php

答案 1 :(得分:0)

好的,对不起我花这么长时间写这个......

代码出现故障的原因是标头标签没有关闭。

 <h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
            <h2 class="header2">Buyers Tools:<h2> 

因此,如果您遇到类似问题,请确保您的代码全部关闭。