IE7的兼容性问题？答案

【问题标题】：Compatibility issues with IE7?IE7的兼容性问题？
【发布时间】：2010-11-13 19:01:10
【问题描述】：

我在一个网站上工作，遇到了 IE7（不工作）与 IE8/Firefox（工作）的兼容性问题。有人可以看看下面的 CSS 和屏幕截图并告诉我为什么我的网站在 IE7 中被破坏以及我可以做些什么来修复它？

有问题的网站在这里：CollectionTree

我的那个视图的css部分是

#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;
}

这是在 IE8 中正确显示的网站截图：
Full Image

这是在 IE7 中看起来一团糟的网站：
Full Image

我需要对我的 CSS 进行哪些更改以使我的页面在 IE7 和 IE8 中看起来“正常”？

【问题讨论】：

@Jericho，很好地提供了必要的信息！
请尝试找出问题所在。开始删除元素和 CSS 属性，直到你看到谁是 noti CSS 属性。

标签： html css internet-explorer-8 internet-explorer-7 cross-browser

【解决方案1】：

首先将 float:left 添加到 .landingTopInfo:

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

这会让你进入球场。

对于 .landingBottomInfo 区域，我会将图像和文本项 (.landingBottomInfoSectionText) 向左浮动，并将左侧填充设置为适合。

【讨论】：

@Jon Galloway，这确实有效。对于底部，我唯一做的就是在它自己的类中包含一个图像，在另一个类中包含文本。在容器部分内以不同方向浮动它们。

【解决方案2】：

我认为这与您在浮动元素上使用基于百分比的宽度有关。

IIRC、IE7 以不同方式舍入百分比到像素的计算，这可能导致组合宽度 > 100%。

【讨论】：

【解决方案3】：

给landingTopInfo一个padding-top: 10px;

给landingTopInfoText 一个float: left; 并将其padding-top 更改为10px

为您的“监控”、“比较”和“查看”图像分别指定float: left;

【讨论】：

【解决方案4】：

移除居中对齐（又名在landingMainContainter 上左对齐），然后将.landingTopInfo 向左浮动。

#landingMainContainer
{
    padding-left:10px;
    margin: 0 auto; 
    **text-align: left;** 
    min-height: 400px; 
    width: 960px;
}

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

【讨论】：