我的网站目前在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;
}
答案 0 :(得分:2)
嗯,对于初学者来说,你的X-UA兼容标头搞砸了。你有一个奇怪的quot;
值。这可能会阻止较新版本呈现为IE7。但是,您应该始终只使用标准模式进行渲染,并使用条件注释对每个浏览器进行细微更改。
如果必须使用x-ua兼容,则应将其作为http标头,而不是元标记。 PHP允许您在开始向客户端写入数据之前添加标题。在那里添加标题。
经过进一步检查,你的代码是..废话。它有180多个验证错误,包括将块级元素放入标题元素中。我建议先将HTML验证,因为无效代码是在不同浏览器上呈现不同内容的首要原因。
答案 1 :(得分:0)
好的,对不起我花这么长时间写这个......
代码出现故障的原因是标头标签没有关闭。
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
因此,如果您遇到类似问题,请确保您的代码全部关闭。