IE6/7 열 레이아웃 CSS 문제

내 ASP.NET MVC4 레이아웃 템플릿의 헤더 섹션에 3 열 (고정 액체 액체)이있는 헤더를 작성하려고하는데 IE6 + 등 크롬, FF는IE6/7 열 레이아웃 CSS 문제

은 특히 나는 내가 윈도우보다 작아 질 때 발생하는 약간의 포장을 필요로한다는 것입니다 (따로 IE6와 IE7을 지원하는 것으로부터)

|--------------------------------------| 
| wrapper        | 
| |---------| |----------| |---------| | 
| | left | | title | | right | | 
| |---------| |----------| |---------| | 
|--------------------------------------|

같은 캐치를 볼 필요가 500px; 모양이 좋아. 이 배치는 미디어 쿼리를 지원할 수있는 브라우저에서만 발생해야합니다. (따라서 IE의 경우 < 9 위의 예제에서 크기를 줄이면 '제목'을 쓸어 버릴 수 있습니다.) 여기

|--------------------------------------| 
| header-wrapper      | 
| |---------|    |---------| | 
| | left |    | right | | 
| |---------|    |---------| | 
|          | 
| |----------------------------------| | 
| |    title    | | 
| |----------------------------------| | 
|--------------------------------------|

내가 CSS를 활용하는 솔루션을 선호하는 것

<header> 
    <div class="content-wrapper header-wrapper"> 
     <div class="header-left-box"> 
      <div class="site-logo"></div>  
     </div> 
     <div class="header-right-box"> 
      <nav> 
       <ul id="menu"><li>Quit</li></ul> 
      </nav>    
     </div>       
     <div class="header-center-box"> 
      <p>title</p> 
     </div> 
    </div> 
</header>

MVC4 템플릿의 관련 부분 내가 여기까지

.content-wrapper { 
    margin: 0 auto; 
    max-width: 1140px; 
} 
.header-wrapper { 
    text-align: center; 
    vertical-align: text-bottom; 
} 
.header-left-box { 
    float: left; 
    width: 160px; 
} 
.header-right-box { 
    float: right; 
    margin:auto;  
} 
.header-center-box { 
    min-width: 200px; 
    background:none; 
    margin:auto; 
    width:50%; 
    padding: 4px; 
} 
.site-logo 
{ 
    background-image:url('/Content/images/logo.png'); 
    background-repeat: no-repeat; 
    background-position: top left;  
    display:block;   
    width:130px; 
    height:80px;  
    margin-bottom: 5px; 
}

을 가지고 그리고 한 CSS입니다 및 HTML.

출처

2013-03-26 Jason

미디어 쿼리는 V9까지 IE에서 지원되지 않습니다. 나는 CSS 전용 접근 방식이 효과가 있을지 의심 스럽다. –

Diodeus에게 감사의 말을 전합니다. – Jason

질문에 제공된 코드는 IE6과 IE7을 제외하고 필요한 모든 것에서 작동합니다.

나는 원래의 body 태그를 대체하기 위해 레이아웃에 다음을 추가하기로 결정했습니다.

<!--[if IE 6]> <body class="ie6"> <![endif]--> 
<!--[if IE 7]> <body class="ie7"> <![endif]--> 
<!--[if gt IE 7]><!--> <body> <!--<![endif]-->

그 자리에서 나는 그 질문에 이미 정의 된 스타일에 다음 스타일을 추가 할 수 있습니다.

.ie6 .header-wrapper, 
.ie7 .header-wrapper { 
    text-align: center; 
    vertical-align: text-bottom;   
    height: 85px; 
} 

.ie6 .header-left-box, 
.ie7 .header-left-box {  
    float: left; 
    width: 25%; 
    height: 82px; 
} 

.ie6 .header-right-box, 
.ie7 .header-right-box { 
    float: right; 
    width: 25%; 
    height: 82px; 
    text-align: right;  
} 

.ie6 .header-center-box, 
.ie7 .header-center-box {  
    padding: 4px;  
    margin-left: 26.2%; 
    margin-right: 26.2%; 
    width: 40%; 
}

이 내가 열 IE6와 IE7의 열 포장을 포함한 모든 브라우저에서 수행하는 데 필요한 모든 것을 처리합니다.

출처

2013-03-27 15:58:48 Jason

제이슨의 대답 외에 브라우저 관련 코딩이나 스타일 시트는 IE가 아닌 다른 브라우저에서 사용할 수 있습니다.

if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) { 
    document.write('<link rel="stylesheet" type="text/css" href="style-ch.css" media="all" />'); 
}

그냥 처럼,이 (위의 예에서 크롬 고유의 스타일 시트를로드) 일부 코드를 실행할 사용하는 브라우저가 지정된 한 경우에만.

물론 당신은 또한과 같이, 브라우저 버전을 지정할 수 있습니다 .indexOf('chrome 11')

이 코드는 일반/크로스 브라 우어 스타일 시트 (들)을 선언 후 를 선언하거나이 작동하지 않을 수 있는지 확인합니다.

IE6과 IE7에 대해 최적화하는 것이 왜 어려울 지 알 수 없습니다. 이전에는 정말 낡았 기 때문에. 하지만 그건 물론 개인적인 선택입니다 :)

출처

2013-03-27 18:51:43 poepje

감사합니다. 내 주요 솔루션은 모든 현대 (및 모바일) 브라우저에서 잘 작동하므로 크롬 등을 대상으로 지정할 필요가 없습니다. 내 상황에서 불행한 점은 대상 인트라넷에 많은 IE6 및 IE7 시스템이 있다는 것입니다. – Jason

이 회사처럼 약간의 업데이트가 필요합니다 : p – poepje

당신이 질문자 였을뿐만 아니라 답변자 였는지 알지 못했습니다. btw haha – poepje

IE6/7 열 레이아웃 CSS 문제

답변

관련 문제