Html 与IE7的兼容性问题?
我在一个网站上工作,与IE7(不工作)和IE8/Firefox(工作)存在兼容性问题。有人可以看看下面的CSS和截图,告诉我为什么我的网站在IE7中被破坏了,我能做些什么来修复它 所讨论的站点位于此处: 我对该视图的css部分是Html 与IE7的兼容性问题?,html,css,internet-explorer-8,internet-explorer-7,cross-browser,Html,Css,Internet Explorer 8,Internet Explorer 7,Cross Browser,我在一个网站上工作,与IE7(不工作)和IE8/Firefox(工作)存在兼容性问题。有人可以看看下面的CSS和截图,告诉我为什么我的网站在IE7中被破坏了,我能做些什么来修复它 所讨论的站点位于此处: 我对该视图的css部分是 #landingMainContainer { padding-left:10px; margin: 0 auto; text-align: center; min-height: 400px; width: 960px;
#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中正确显示的屏幕截图:
以下是IE7中看起来一团糟的网站:
在IE7和IE8中,我需要对CSS进行哪些更改才能使我的页面看起来“正常”?首先添加一个浮动:左至。landingTopInfo:
.landingTopInfo{
float: left;
padding-top:10px;
text-align:left;
width:50%;
padding-left:15px;}
那会让你进入一个大概的状态
对于.landingBottomInfo区域,我会将图像和文本项(.landingBottomInfoSectionText)放在左边,并将左边的填充设置为合适。我认为这与在浮动元素上使用基于百分比的宽度有关 IIRC、IE7以不同的方式对百分比与像素计算进行舍入,这可能导致组合宽度大于100%。删除对齐中心(在
landingmaincainter
上也称为左对齐),然后将.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;**
}
给出
landingTopInfo
apaddingtop:10px代码>
给出landingTopInfoText
afloat:左
并将其填充顶部
更改为10px
为“监视器”、“比较”和“查看”图像分别设置一个float:left代码>@Jericho,很好地提供了必要的信息!一定要找出问题所在。开始删除元素和CSS属性,直到看到谁是noti CSS属性为止。@Jon Galloway,这确实有效。对于底部部分,我所做的唯一一件事就是在它自己的类中包含一个图像,在另一个类中包含文本。在一个容器段内将它们朝不同方向漂浮。