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>

렌더링하는 동안 html 테이블에서 원하지 않는 셀 을 방지 하는 매우 유용한 스크립트 를 찾았습니다 .

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

페이지가로드 될 때 호출해야하는이 자바 스크립트 함수 (예 : onload 이벤트)

답변이 늦었지만 누군가를 도울 수 있기를 바랍니다. IE9에서 디버깅 할 때 동일한 문제가 발생했습니다. 해결책은 HTML 코드에서 모든 공백을 제거하는 것이 었습니다. 대신에

<tr> <td>...</td> <td>...</td> </tr>

나는해야했다

<tr><td>...</td><td>...</td></tr>

이것은 문제를 해결하는 것 같았습니다!

이것은 IE9의 매우 심각한 버그입니다. 제 경우에는 다른 td 사이의 공백 만 제거하는 것만으로는 충분하지 않으므로 다른 tr 사이의 공백도 제거했습니다. 그리고 그것은 잘 작동합니다.

동적 테이블을 렌더링 할 때 ie-9와 비슷한 문제가있었습니다.

var table = $('<table><tr><td style="width :100"></td></tr></table>');

렌더링하면 다음으로 변환됩니다.

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

이것은 ie = 10 크롬 사파리에서 완벽하게 작동합니다 ...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

100px대신 작성해야합니다 100.

ie9에서 동일한 형식화 문제가 발생하고 올바르게 형식화되지만 약 400 행 9 열의 테이블을 렌더링하는 데 25-40 초가 소요되는 ie11의 새로운 문제가 있습니다. 동일한 원인, tr 또는 td 태그 내부에 공백이 있습니다.

AJAX 호출에서 부분보기를 렌더링하여 생성 된 테이블을 표시하고 있습니다. http://optimizeasp.net/remove-whitespace-from-html에 게시 된 방법을 사용하여 렌더링 된 부분보기에서 공백을 제거하여 서버에서 BFH를 결정했습니다.

이것은 그의 솔루션이 복사되었습니다.

    private static readonly Regex RegexBetweenTags = new Regex(@">(?! )\s+",     RegexOptions.Compiled);
    private static readonly Regex RegexLineBreaks = new Regex(@"([\n\s])+?(?<= {2,})<", RegexOptions.Compiled);
    private static string RemoveWhitespaceFromHtml(string html)
    {

        html = RegexBetweenTags.Replace(html, ">");
        html = RegexLineBreaks.Replace(html, "<");
        return html.Trim();

    }

그리고 여기에 다른 SO 답변에서 훔친 부분 뷰를 문자열로 반환하는 메서드가 있습니다.

public string RenderPartialViewToString(string viewName, object model)
    {
        this.ViewData.Model = model;
        try
        {
            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return RemoveWhitespaceFromHtml(sw.ToString());
            }
        }
        catch (Exception ex)
        {
            //logger here
        }
    }

약간의 시간이 걸리지 만 약 400 행의 테이블을 렌더링하는 데는 1 초도 걸리지 않습니다. 제 목적에는 충분합니다.

Knockout에서 생성 한 테이블에서 때때로이 문제가 발생했습니다. 제 경우에는 여기에 있는 jQuery 솔루션을 사용하여 수정했습니다.

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

IE10에서 KendoUI 그리드와 동일한 문제가 발생했습니다. IE가이 해킹으로 누락 된 테이블 셀을 다시 렌더링하도록 강제 할 수있었습니다.

htmlTableElement.appendChild(document.createTextNode(''));

빈 textNode를 추가하면 IE가 전체 테이블을 다시 렌더링합니다.