与IE7的兼容性问题？ [英] Compatibility issues with IE7?

问题描述

我正在开发一个网站，并且与IE7（不工作）和IE8 / Firefox（正常工作）存在兼容性问题。有人可以看看下面的CSS和截图，并告诉我为什么我的网站在IE7中被破坏以及我可以做些什么来解决它？

有问题的网站是住在这里：

这是在IE7中看起来乱糟糟的网站：


完整图片

我需要更改CSS以使我的页面在IE7以及IE8中看起来正常？

解决方案

首先添加一个浮点数：left to .landingTopInfo：

  .landingTopInfo {
 float：left; 
 padding-top：10px; 
 text-align：left; 
宽度：50％; 
 padding-left：15px;} 
  

这将让你进入球场。

对于.landingBottomInfo区域，我将向左移动图像和文本项（.​​landingBottomInfoSectionText）并将左边距设置为适合。

I'm working on a site and having compatibility issues with IE7 (not working) vs IE8/Firefox (working). Can someone take a look at the following CSS and Screenshots and tell me why my site is broken in IE7 and what I can do to fix it?

The site in question is live here: CollectionTree

and my css part for that view is

#landingMainContainer
{
    padding-left:10px;
    margin: 0 auto; 
    text-align: center; 
    min-height: 400px; 
    width: 960px;
}
.landingTop
{
    width:100%;
    min-height:400px;
    background:url('/Content/Images/BG_gray1_v2.png') no-repeat;
}
.landingTopInfo
{
    padding-top:10px;
    text-align:left;
    width:50%;
    padding-left:15px;
}
.landingTopInfoText
{
    padding-left:20px;
    padding-top:20px;
    float:left;
    color:#000000;
    font-size:20px;
}
.landingTopInfoTextTitle
{
    font-size:26px;
    text-align:left;
    padding-left:40px;
    padding-top:10px;
    clear:left;
    color:#209202;
}
.landingTopInfoTextContents
{
    font-size:12px;
    padding-left:40px;
    padding-top:10px;
    clear:left;
    color:#000000;
}
.landingTopInfoSignUpSection
{
    clear:left;
    float:left;
    padding-left:40px;
    padding-top:30px;
}
.landingTopInfoSignUpSectionText
{
    padding-left:10px;
    padding-top:10px;
    float:left;
    font-weight:normal;
}
.landingTopInfoImage
{
    float:right;
    background:url('/Content/Images/Dashboard_mockup.png') no-repeat;
    width:40%;
    height:290px;
}
.landingBottomInfo
{
    width:100%;
    float:left;
    padding-left:20px;
    color:#000000;
}
.landingBottomInfoSection
{
    float:left;
    width:30%;
    text-align:left;
    font-size:10px;
    font-weight:normal;
    padding-left:20px;
}
.landingBottomInfoSectionText
{
    width:66%;
    float:right;
    text-align:left;
}
.landingBottomInfoSectionTextFirstLine
{
    font-size:11px;
    font-weight:bold;
}
.landingBottom
{
    width:100%;
    min-height:150px;
}
.landingBottomLeftSection
{
    background:url('/Content/Images/BG_gray2_v2.png') no-repeat;
    width:60%;
    min-height:140px;
    float:left;
}
.landingBottomLeftSectionTitle
{
    font-weight:normal;
    font-size:19px;
    color:#FFFFFF;
}
.landingBottomLeftSectionImage
{
    float:left;
    padding-left:40px;
    padding-top:10px;
}
.landingBottomLeftSectionText
{
    padding-right:100px;
    padding-top:10px;
    float:right;
}
.landingBottomLeftSectionTextTitle
{
    font-weight:bold;
    color:#000000;
    font-size:14px;
}
.landingBottomLeftSectionTextSentence
{
    text-align:left;
    color:#000000;
    padding-top:10px;
    padding-left:15px;
    font-weight:normal;
    font-size:10px;    
}
.landingBottomRightSection
{
    padding-top:7px;
    width:35%;
    min-height:140px;
    float:right;
}
.landingBottomRightSectionTitle
{
    text-align:left;
    color:#209202;
    font-weight:bold;
}
.landingBottomRightSectionText
{
    width:70%;
    color:#000000;
    font-size:10px;
    font-weight:normal;
    padding-top:15px;
    text-align:left;
    float:left;
}
.landingBottomRightSectionTextLink
{
    text-align:left;
    padding-top:20px;
}
a.landingBottomRightSectionTextLink:link { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; }
a.landingBottomRightSectionTextLink:active { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; }
a.landingBottomRightSectionTextLink:visited { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; }
a.landingBottomRightSectionTextLink:hover { color: #3399FF; text-decoration: underline; font-weight:bold; font-size:11px; }
.landingBottomRightSectionImage
{
    width:30%;
    float:right;
}

Here is a screenshot of the website displaying correctly in IE8:
Full Image

Here is the website looking messed up in IE7:
Full Image

What do I need to change with my CSS to make my page look "ok" in IE7 as well as IE8?

解决方案

Start with adding a float:left to .landingTopInfo:

.landingTopInfo{ 
    float: left;
    padding-top:10px;
    text-align:left;
    width:50%;
    padding-left:15px;}

That'll get you in the ballpark.

For the .landingBottomInfo area, I'd foat the image and text items (.landingBottomInfoSectionText) left and set the left padding to fit.

这篇关于与IE7的兼容性问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！