[jquery] Internet Explorer 9가 표 셀을 제대로 렌더링하지 않음

내 웹 사이트는 항상 IE8, IE7, FF, Chrome 및 Safari에서 원활하게 실행되었습니다. 이제 IE9에서 테스트 중이며 이상한 문제가 있습니다. 일부 페이지에서 일부 테이블 형식 데이터가 잘못 렌더링됩니다.

HTML 소스가 올 바르고 전부이며 페이지를 새로 고칠 때마다 문제를 제공하는 행이 변경됩니다 (진실을 말하면 문제 자체는 전부가 아닌 일부 새로 고침에만 나타남).

IE의 F12 도구를 사용하면 테이블 구조가 올바르게 표시되고 M08000007448이 포함 된 TD 뒤에 빈 TD가 없어야하지만 여전히 이와 같이 렌더링됩니다.

또한 도구 모음에서 “클릭하여 요소 선택”도구와 함께 F12 도구를 사용하고 M08000007448과 19 사이의 빈 공간을 클릭하려고하면 “숨겨진 td”가 아닌 TR이 선택됩니다.

이 테이블 렌더링 문제가 응용 프로그램의 다른 테이블에서도 발생합니다. IE9에서만 발생합니다.

중요한지 모르겠지만 페이지는 ASPNET (웹 양식)으로 만들어져 있으며 Jquery 및 기타 JS 플러그인을 사용합니다.

페이지 (이미지 포함)를 저장하고 IE9를 사용하여 로컬에서 열려고했지만 문제가 발생하지 않습니다. (물론 모든 테이블 구조를 확인했는데 괜찮습니다. 헤더와 모든 행에는 필요한 경우 올바른 colspan 수와 함께 동일한 수의 TD가 있습니다.)



답변

여기에 이미지 설명 입력나도 똑같은 문제가 있습니다. https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables 를 읽을 수 있습니다.

HTML이 ajax에서 반환되면 javascript를 사용하여 td 사이의 공백을 제거하고 응답에서

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);


답변

jquery 템플릿을 사용하여 테이블을 채우는 것과 똑같은 문제가 발생했습니다. 나는 <td>IE9에서만 더 큰 데이터 세트 (300+)에 ‘고스트’를 계속 가지고 있었습니다. 이것들 <td>은 내 테이블의 경계 외부로 외부 열을 밀어 넣습니다.

나는 정말 어리석은 일을함으로써 이것을 고쳤다. <td>시작 및 끝 태그 사이 의 모든 공백을 제거 하고 내 테이블과 관련된 HTML 마크 업을 정렬했습니다. 기본적으로, 당신은 <td> </td>공백없이 같은 줄에 모든 것을 원합니다 .

예:

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>


답변

@Shanison이 제공 한 솔루션은 부분적으로 만 도움이되지만 thead, th 등과 같은 테이블 콘텐츠 모델의 일부가 될 수있는 다른 요소 사이에 공백이 있으면 문제가 지속됩니다.

직장에서 내 리드가 고안 한 더 나은 정규식이 있습니다.

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

모든 테이블, 캡션, colgroup, col, tbody, thead, tfoot, tr, td, th 요소를 포함합니다.

참고 : jQuery.browser는 jQuery 1.9에서 제거되었으며 jQuery.migrate 플러그인을 통해서만 사용할 수 있습니다. 대신 기능 감지를 사용해보십시오.


답변

공백을 제거하여이 문제를 해결했습니다.

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var response_html_fixed = data.replace(expr, '><'); //A disgusting hack for ie9. Removes space between open and close <td> tags
$('#treegrid-data').replaceWith(response_html_fixed);


답변

IE 블로그는 오늘날 IE 9 렌더링 비 호환성 문제를 해결하는 데 도움이되는 Compat Inspector 스크립트라는 새로운 도구를 언급합니다. 문제 해결에 도움이 될 수 있습니다.

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx


답변

나도 그 문제가 있었다.

그것은 나에게 그 발생 width 속성 에서 TD / 일 태그 causng이 문제를.

로 변경 “XXpx 폭”= 스타일 과 문제가 해결됩니다 🙂


답변

이 문제도 만났고 <td>요소 에 텍스트를 직접 넣을 때 발생한다는 것을 깨달았습니다 . 표준인지 아닌지는 확실하지 않지만 <span>요소에 텍스트를 래핑 한 후 렌더링 문제가 사라졌습니다.

그래서 대신 :

<td>gibberish</td>

시험:

<td><span>gibberish</span></td>