IE7 및 CSS 테이블 세포 속성

StackOverflow https://stackoverflow.com/questions/249103

문제

그래서 나는 내 애플리케이션이 Firefox에서 잘 작동 할 때 그것을 좋아하지만, IE에서 그것을 열고 ... 아니요, 다시 시도하십시오.

내가 가진 문제는 CSS 디스플레이 속성을 어느 쪽이든 설정한다는 것입니다. none 또는 table-cell JavaScript와 함께.

나는 처음에 사용하고 있었다 display: block, 그러나 Firefox는없이 이상하게 렌더링하고있었습니다 table-cell 재산.

IE를 테스트하기 위해 JavaScript에 해킹을 추가하지 않고이 작업을 수행하고 싶습니다. 제안이 있습니까?

감사.

도움이 되었습니까?

해결책

이 설정을 해결하는 좋은 방법 display 가치 '':

<script type="text/javascript">
<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->
</script>

빈 값으로 인해 스타일이 기본값으로 되돌아갑니다. 이 솔루션은 모든 주요 브라우저에서 작동합니다.

다른 팁

jQuery를 사용하여 이것을 해결했습니다.

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

위의 스크립트는 다음과 같은 스타일을 사용하는 div가 있다고 가정합니다.

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

나는 같은 문제가 있었고 사용했습니다

*float: left;

"*"는 IE 만 나타냅니다

잘, IE7에는 없습니다 display: table(-cell/-row) 따라서 다른 것을 알아 내거나 브라우저 타겟팅을해야합니다 (동의하는 것은 나쁜 해킹입니다). 빠른 수정으로 (당신이 무엇을 달성하려고하는지 모르겠습니다. 외관상) 시도해 볼 수 있습니다. display: inline-block 그리고 그것이 어떻게 생겼는지보십시오.

할 수있는 방법을 알아낼 수도 있습니다 display: block 대신 "Firefox 렌더링"의 문제를 해결합니까? 이상한 렌더링이 정확히 무엇을 의미하는지 설명 할 수 있습니까?

IE를 테스트하기 위해 JavaScript가 필요하지 않습니다. 조건부 의견.

솔루션을 볼 수 있습니다 이 녀석 IE에서 테이블과 같은 디스플레이를 처리하기위한 것입니다.

인라인 블록을 사용하는 것은 이러한 유형의 물건에 적합합니다. 아니요, IE 6 및 IE 7 기술적으로 디스플레이가 없습니다 : 인라인 블록이지만 다음 스타일로 동작을 복제 할 수 있습니다.

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

이의 핵심은 'Zoom : 1'입니다. 브라우저가 블록 레벨 요소를 렌더링하는 방식을 변경하는 요소의 'Haslayout'속성을 전환합니다. 인라인 블록이있는 유일한 gotcha는 4px 미만의 마진을 가질 수 없다는 것입니다.

저는 10 년 넘게 CSS를 사용해 왔으며 디스플레이를 사용할 기회가 없었으며 테이블 셀을 사용해야했으며 조건부 의견을 사용하는 유일한 시간은 IE6에서 고급 효과를 숨기는 것입니다.

나는 다른 접근법이 본질적으로 브라우저를 교차 브라우저로 해결할 것이라고 생각합니다. 달성하려는 효과를 설명하고 현재 Firefox에서 일하고있는 HTML 및 CSS를 게시하는 별도의 질문을 열 수 있습니까?

코드 예제는 사용자의 눈꺼풀이없는 조건부 의견을 제시하고 친절하게 게시 됨

[LT IE 8]IE8이 올바르게 수행하기 때문에 브라우저가 IE8보다 낮은 경우에만 작동합니다. 조건부 의견으로 IE7은 DIV를 수평으로 멋지게 배열합니다 ... HTML : 

 <div class="container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div>

내 CSS 

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }

IE 8 및 9는 Firefox와 마찬가지로 CSS와 협력합니다. IE7은 이제 테이블과 TD & TG 태그를 사용하여 동일하게 보입니다. 일부 페이지에서 IE 8은 시간의 20% 만 작동 했으므로 [IF IE 9]를 사용했습니다.

또한 IE7이 처리 할 수없는 수직 정렬 문제를 부드럽게하는 데 도움이됩니다.

나는 모든 것을 시도했고 내가 찾은 유일한 방법은 모두 크로스 브라우저라는 것이 JavaScript / jQuery를 사용하는 것이 었습니다. 이것은 깨끗한 가벼운 솔루션입니다. 여기를 클릭하십시오

IE7은 지원하지 않습니다 display:inline-block; 어느 하나. 명백한 해킹은입니다 zoom: 1; *display: inline; CSS 후 display:table-cell;

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top