Internet Explorer에서 표가 불량합니다.

제가 만든 레이아웃이있는 표가 있습니다. Google 크롬과 Firefox에서는 레이아웃이 잘 보이지만 Internet Explorer에서는 잘 보이지 않습니다.Internet Explorer에서 표가 불량합니다.

이 그것의 어떻게 크롬에서 찾습니다 :

Chrome

이것은 IE에서 보이는 어떻게입니다 :

<table border="1"> 
    <tr> 
     <td style="width: 46%" colspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
    </tr> 
    <tr> 
     <td style="width: 23%" rowspan="2"></td> 
     <td style="width: 23%" rowspan="2"></td> 
    </tr> 
    <tr> 
     <td style="width: 46%" colspan="2"></td> 
    </tr> 
</table>

:이 테이블의 HTML 코드

어떻게 해결할 수 있습니까? 이러한 레이아웃의 차이점은 무엇입니까?

출처

2013-11-23 Nir Berko

당신은이 문제를 해결하기 위해 많은 것들을 시도 할 수 ... 당신의 HTML 페이지에 다음 "해킹"을 추가

시도가 :

<!--[if IE]> 
    <link href="/style/ie.css" type="text/css" rel="Stylesheet" /> 
<![endif]--> 

<!--[if !IE]> 
    <link href="/style/core.css" type="text/css" rel="Stylesheet" /> 
<![endif]-->

이것은을 사용하는 IE를 강제로 ie.css에 지정하는 규칙에 따라 원하는 규칙을 지정할 수 있습니다. 또한 IE에서 Google 크롬 및 Firefox에서 사용되는 다른 부분을 숨 깁니다.

http://jigsaw.w3.org/css-validator/ 대신 비율의

, 그것은 W3C의 표준을 충족하는지 확인하기 위해 CSS를 검증하기 위해

<td style="width: 20px; padding-top: 20px;" rowspan="2">

당신은 다음 사이트를 사용할 수 있습니다처럼 고정 된 픽셀 값을 사용해보십시오

CSS를 사용하면 호환성 문제가 발생하고 다시 오류가 발생합니다. 그들은 존재합니다. 파일에서 실수가있는 위치를 표시하여 으로 수정할 수 있습니다. 나는 당신을 위해 CSS 을 고쳐 줄 어떤 도구에 대해서 모르겠다. 나는 아무 것도 배울 수 없기 때문에 그것을 사용하지 않을 것이다. 그런 식으로.

http://validator.w3.org/

이러한 도구를 사용하면 당신은 크로스 브라우저 호환 웹 사이트를하는 데 도움이됩니다 ... 뭔가가있는 경우 :

당신은 당신이 사용하여 HTML 및 기타 마크 업 유효성을 검사 언어를 다음 사이트를 사용할 수 있습니다 호환되지 않는 경우이 도구 을 사용하여 작업 디버깅 및 수정 작업을 수행 할 수 있습니다. 롭 아래 지적했다

으로, IE는 오래된 대부분의 버전은 HTML5 호환성 부족, 그래서 당신은 당신이 크로스 브라우저 호환 사이트를 만드는 거라면 해결책을 마련 할 것이다.IE 시도하고

대신 사용 ROWSPAN

높이 = "33 %"또는 높이를 사용해보십시오 = "66 %"

또는보고 나머지 공간을 채우기 때문에

출처

2013-11-23 13:56:30 tinthetub

IE 용으로 마크 업 또는 CSS를 조정하면 안됩니다. 마크 업이 유효하면 IE가 문제입니다. (물론 IE는 항상 문제입니다.) – Rob

@Rob 나는 당신과 거기에 동의합니다. IE는 항상 문제지만, 좋은 개발자는 항상 크로스 브라우저 호환이 가능합니다. 그게 그가 우리에게 도움을 요청한 것입니다. – tinthetub

하지만 IE 용으로 작업 마크 업을 변경해야한다는 것에 동의하지 않습니다. 당신이 보여주는 것과 같은 다른 방법이 있습니다. (누구나 "크로스 브라우저 호환"이라면 언제나 "IE에서 작동하게"한다는 의미입니다.) – Rob

나는 그것을 생각 모두

출처

2013-11-23 14:05:31

정적 인 높이를 설정하고 싶지 않습니다. –

@NirBe 또한 'border-collapse : collapse;'를 적용 해 보셨습니까? 이렇게하면 IE에서 테두리가 위아래로 움직이지 않을 수 있습니다. – tinthetub

예, 작동하지 않습니다. –

하려고이 같은 각 행의 높이를 정의

<table border="1" style="width:100%; height: 100%"> 
    <tr style="height: 33%"> 
     <td style="width: 46%" colspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
    </tr> 
    <tr style="height: 33%"> 
     <td style="width: 23%" rowspan="2"></td> 
     <td style="width: 23%" rowspan="2"></td> 
    </tr> 
    <tr style="height: 33%"> 
     <td style="width: 46%" colspan="2"></td> 
    </tr> 
</table>

IE8 및 IE 11에서 테스트되었습니다.

출처

2013-11-25 15:31:01 DePhiless

Internet Explorer에서 표가 불량합니다.

답변

관련 문제