Internet Explorer 9가 테이블 셀을 올바르게 렌더링하지 않음

Internet Explorer 9가 테이블 셀을 올바르게 렌더링하지 않음

제 웹사이트는 IE8, IE7, FF, Chrome, Safari에서 항상 원활하게 운영되고 있습니다.IE9에서 테스트하고 있는데, 일부 페이지에서 표 형식의 데이터가 올바르게 렌더링되지 않는 이상한 문제가 발생하고 있습니다.

HTML 소스는 모두 올바르고 문제가 발생하는 행은 페이지를 새로 고칠 때마다 바뀝니다(솔직히 말하면 문제 자체는 일부 새로 고침에서만 나타나는 것이지 전부가 아닙니다).

IE의 F12 Tool을 사용하면 테이블 구조가 올바르게 표시됩니다.TD 뒤에 M08000007448이 있는 빈 TD는 없습니다만, 그대로 렌더링 됩니다.

또한 툴바의 "select element by click" 툴과 함께 F12 툴을 사용하여 M08000007448과 19 사이의 빈 공간을 클릭하면 "hidden td"가 아닌 TR이 선택됩니다.

어플리케이션의 다른 테이블에서도 이 테이블 렌더링 문제가 발생하고 있습니다.이러한 현상이 발생하고 있는 사람이 있습니까?IE9에서만 발생합니다.

중요한지는 모르겠지만, 페이지는 ASPNET(웹폼)으로 작성되어 JQuery와 다른 JS 플러그인을 사용하고 있습니다.

(이미지와 함께) 페이지를 저장하고 IE9에서 로컬로 열려고 했지만 문제가 발생하지 않았습니다.(물론 테이블 구조를 모두 확인했는데 문제 없습니다.헤더와 모든 행은 같은 수의 TD를 가지며, 필요에 따라 적절한 수의 콜스팬을 가진다).

저도 똑같은 문제가 있어요.https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables 를 참조해 주세요.

you는 html이 ajax에서 반환된 경우 javascript를 사용하여 td 사이의 공백을 제거할 수 있습니다.그 후 응답에서 td로 대체합니다.

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

jquery 템플릿을 사용하여 테이블을 채울 때도 동일한 문제가 있었습니다. '이 나왔어요.<td> 의 데이터 세트(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의 솔루션은 부분적으로만 도움이 되지만 ad 등 테이블 콘텐츠 모델의 일부가 될 수 있는 다른 요소 사이에 공백이 있으면 문제가 지속됩니다.

여기 우리 팀장이 고안한 더 좋은 정규식이 있습니다.

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

모든 표, 캡션, 그룹, col, tbody, tad, 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 블로그에서는, IE9 렌더링의 비호환성의 트러블 슈팅에 도움이 되는, Compative Inspector 스크립트라고 불리는 새로운 툴에 대해 설명하고 있습니다.문제의 트러블 슈팅에 도움이 될 수 있습니다.

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

나도 그 문제가 있었어.

td/th 태그의 width 속성이 이 문제의 원인이라는 생각이 들었습니다.

style="width: XXpx"로 변경해, 문제가 해결되었습니다.

도 이 , 가 직접 때 이 일어났다는 요.<td>요소들.표준인지 아닌지는 잘 모르겠지만, 텍스트로 묶은 후에<span>이치노

그래서 다음 대신:

<td>gibberish</td>

시험:

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

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

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

페이지 로드 시 호출해야 하는 Javascript 함수(즉, 온로드 이벤트)

답변이 늦었지만 누군가 도와줄 수 있으면 좋겠네요.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>

써야 요.100px100.

ie9에서도 같은 포맷의 문제가 발생하며, ie11에서도 포맷이 올바르게 이루어지지만 약 400행과 9열의 테이블을 렌더링하는 데 25~40초가 걸리는 새로운 문제가 발생합니다.tr 태그 또는 td 태그 내부에 공백이 있기 때문에 같은 원인이 됩니다.

AJAX 콜에서 부분 뷰를 렌더링하여 작성된 테이블을 표시하고 있습니다.렌더링된 부분 뷰에서 여백을 삭제하여 서버상에서 BFH로 설정하기로 했습니다.여기에는 http://optimizeasp.net/remove-whitespace-from-html 라는 메서드가 게재되어 있습니다.

다음은 그가 직접 복사한 솔루션입니다.

    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초도 걸리지 않습니다.이 정도면 충분합니다.

Knocko에 의해 생성된 테이블에서 가끔 이 문제가 발생하였습니다.제 경우 여기에 있는 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의 UI 그리드이 해킹을 통해 IE가 누락된 테이블 셀을 강제로 다시 렌더링할 수 있었습니다.

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

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

언급URL : https://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly