IE7과의 호환성 문제?

사이트에서 작업 중이며 IE7 (작동하지 않음)과 IE8/Firefox (작동 중)와의 호환성 문제가 있습니다. 누군가 다음 CSS와 스크린 샷을보고 IE7에서 내 사이트가 왜 고장 났으며이를 해결하기 위해 무엇을 할 수 있는지 말해 줄 수 있습니까? CollectionTree IE7과의 호환성 문제?

및 해당 뷰에 대한 내 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
Full Image

다음은 IE7에서 엉망으로 보이는 웹 사이트입니다. alt text 01 23, Full Image

나는 나의 페이지가 IE8뿐만 아니라 IE7에서 "확인"을 보이게 내 CSS로 변경하려면 어떻게해야합니까? float를 추가로

출처

2009-07-24 A Salcedo

에게, landingTopInfopadding-top: 10px;

이 landingTopInfoTextfloat: left;을주고" "모니터"의 padding-top-10px

당신을 지정 변경 비교주세요 "와" @ 여리고, 필요한 정보를 제공하는 좋은 직장! – mmcdole

문제를 정확히 찾아보십시오. noti CSS 속성이 누구인지 알 때까지 요소와 CSS 속성을 제거하기 시작합니다. –

시작 : .landingTopInfo 왼쪽 :

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

즉, 당신이 야구장에서 얻을 수 있습니다.

.landingBottomInfo 영역의 경우, 이미지 및 텍스트 항목 (.landingBottomInfoSectionText)을 왼쪽으로 채우고 왼쪽 패딩을 맞게 설정합니다.

출처

2009-07-24 15:55:02

@ Jon Galloway, 실제로 작동했습니다. 아래쪽 부분에 대해서만 내가 한 것은 자신의 클래스에 하나의 이미지를 포함하고 다른 클래스에는 텍스트를 포함했습니다. 컨테이너 섹션 내부에 서로 다른 방향으로 플로팅했습니다. –

플로팅 요소에서 백분율 기반 너비를 사용하는 것과 관련이 있다고 생각합니다.

IIRC, IE7은 백분율 - 픽셀 계산을 다르게 반올림하므로 결합 된 너비가 100 %를 넘을 수 있습니다.

출처

2009-07-24 15:55:12 richardtallent

정렬 센터 (별칭은 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;** 
}

출처

2009-07-24 16:00:57 easement

보기 "이미지를 각각 float: left;

출처

2009-07-24 16:08:06

IE7과의 호환성 문제?

답변

관련 문제