Проблемы совместимости с IE7?

Я работаю над сайтом, и у меня проблемы с совместимостью с 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: alt text
Полное изображение

Вот веб-сайт, который выглядит испорченным в IE7: alt text
Полное изображение

Что мне нужно изменить с помощью моего CSS, чтобы моя страница выглядела "нормально" в IE7, а также в IE8?

A Salcedo 24.07.2009 источник

comment

@Jericho, отличная работа по предоставлению необходимой информации! - mmcdole 24.07.2009

comment

Постарайтесь точно определить проблему. Начните удалять элементы и атрибуты CSS, пока не увидите, кто является атрибутом noti CSS. - Itay Moav -Malimovka 24.07.2009

Ответы (4)

arrow_upward
3
arrow_downward

Начните с добавления float: left в .landingTopInfo:

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

Это даст вам примерную оценку.

Для области .landingBottomInfo я бы поместил изображение и текстовые элементы (.landingBottomInfoSectionText) влево и установил левое заполнение по размеру.

Jon Galloway 24.07.2009

comment

@Jon Galloway, это действительно сработало. Что касается нижней части, единственное, что я сделал, - это включил одно изображение в отдельный класс, а текст - в другой. Разместил их в разных направлениях внутри секции контейнера. - A Salcedo; 24.07.2009

arrow_upward
1
arrow_downward

Я думаю, это связано с тем, что вы используете процентную ширину плавающего элемента.

IIRC, IE7 по-разному округляет вычисления процентного отношения к пикселям, что может привести к тому, что общая ширина будет> 100%.

richardtallent 24.07.2009

arrow_upward
0
arrow_downward

Дайте landingTopInfo padding-top: 10px;

Дайте landingTopInfoText float: left; и измените его padding-top на 10px

Дайте каждому из изображений "монитор", "сравнение" и "просмотр" float: left;

Billy Jo 24.07.2009

arrow_upward
0
arrow_downward

удалите центр выравнивания (также известный как выравнивание по левому краю на 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;**
}

easement 24.07.2009

Проблемы совместимости с IE7?

Ответы (4)

Похожие вопросы