如何处理IE9 html表错误，其中额外列显示部分视图的某些行？

Question

我看到这个问题已经在IE9周围被问到，但是在html表的随机行中添加了额外的列。 根问题似乎是在IE 10中修复的IE 9错误（但我有很多IE9用户）

它声明它通常发生在通过ajax构建的表中，但我在输出html表的常规页面上看到这一点。

有一个解决方法Javascript解决方案，但答案假定您正在构建一个使用Javascript的表（来自ajax调用）。 我正在使用局部视图（或者在某些情况下只是直接在单个页面上呈现常规格式化的html表）所以我想知道是否有一个解决方案可以在IE9上直接渲染直接html时阻止此UI问题页。

我想避免在我的实际代码中实际上没有空格，因为这将很难维护。

Answer 1

我遇到了同样的问题，最终在这个页面上寻找解决方案。 在我的情况下，问题是由ASP.Net 4的Repeater控件呈现的HTML。

我检查了服务器用Charles生成的代码，HTML没有问题。

问题的最后一句话引导我自己的简单解决方案。

我想避免在我的实际代码中实际上没有空格，因为这将很难维护。

我只是在TR标记的开头和第一个TD标记之间以及每个TD和结束TR标记之间添加注释：

<tr><!--
 --><td class="cell">
    Cell 1  
    </td><!--
 --><td class="cell">
    Cell 2  
    </td><!--
 --><td class="cell">
    Cell 3  
    </td><!--
 --><td class="cell">
    Cell 1  
    </td><!--
 --></tr>

此解决方案意味着我们不必使用扩展，并且将来不难读取或维护代码。

Answer 2

这个有可能。 对于部分视图，它更简单，因为您可以直接捕获Html.Partial的输出，在将响应写入输出流之前对其进行修改。

为此，您需要创建一个扩展方法，它看起来像这样：

public static class HtmlExtensions
{
    public static HtmlString PartialIE9TableFix(this HtmlHelper helper,
        string view, object model = null)
    {
        var partialOutput = helper.Partial(view, model).ToString();
        partialOutput = Regex.Replace(partialOutput, @"/td>\s+<td",
                            "/td><td", RegexOptions.IgnoreCase);

        return MvcHtmlString.Create(partialOutput);
    }
}

如您所见，它直接捕获Html.Partial的输出，然后执行替换。 您可以在视图中使用它，如下所示：

@Html.PartialIE9TableFix("YourPartial")

但是，要为实际视图执行此操作需要更多工作，并且在使用它时肯定会更加小心。 为了做到这一点，我们实际上需要在响应流发送到客户端之前捕获并修改它。

下面的IE9TableFixFilter非常基于Minify HTML with .NET MVC ActionFilter的代码。

using System;
using System.IO;
using System.Text;

public class IE9TableFixFilter : Stream
{
    public IE9TableFixFilter(Stream response, Func<string, string> filter)
    {
        this.response = response;
        this.filter = filter;
    }

    public override bool CanRead { get { return true; } }
    public override bool CanSeek { get { return true; } }
    public override bool CanWrite { get { return true; } }
    public override void Flush() { response.Flush(); }
    public override long Length { get { return 0; } }
    public override long Position { get; set; }

    public override int Read(byte[] buffer, int offset, int count)
    {
        return response.Read(buffer, offset, count);
    }

    public override long Seek(long offset, SeekOrigin origin)
    {
        return response.Seek(offset, origin);
    }

    public override void SetLength(long value)
    {
        response.SetLength(value);
    }

    public override void Close()
    {
        response.Close();
    }

    public override void Write(byte[] buffer, int offset, int count)
    {
        //byte[] data = new byte[count];
        //Buffer.BlockCopy(buffer, offset, data, 0, count);
        string s = Encoding.Default.GetString(buffer);

        s = filter(s);

        byte[] outData = Encoding.Default.GetBytes(s);
        response.Write(outData, 0, outData.GetLength(0));
    }

    private Stream response;
    private Func<string, string> filter;
}

这里的大部分代码都填充了Stream abstract成员的实现。 重要的部分是Write方法中发生的事情。

本文中的Write版本首先制作流的字节副本，而不实际使用它们。 如果这是出于某些特定原因，那里就没有提及，但它对我来说似乎毫无用处，所以我对这些内容进行了评论。

接下来，我们需要创建一个简单的ActionFilter来将响应过滤器应用于：

using System.Text.RegularExpressions;
using System.Web.Mvc;

public class IE9TableFixFilterAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var response = filterContext.HttpContext.Response;
        response.Filter = new IE9TableFixFilter(response.Filter,
            s => Regex.Replace(s, @"/td>\s+<td", "/td><td", RegexOptions.IgnoreCase));
    }
}

现在这一切都已完成，我强烈建议您不要全局应用此过滤器，而是选择在需要使用它的操作上进行装饰。 之所以这样，是因为它自然会产生一些性能损失，所以最好明确一下它何时需要它。 使用它时，您不需要部分扩展方法。 所以只需装饰你的动作就可以使用它：

[IE9TableFixFilterAttribute]
public ActionResult Index()
{
    return View();
}

更新

要使过滤器属性更有效，您实际上只需将其应用于包含用户代理字符串MSIE 9.0浏览器：

public class IE9TableFixFilterAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var request = filterContext.HttpContext.Request;
        var response = filterContext.HttpContext.Response;

        if (request.UserAgent.Contains("MSIE 9.0"))
        {
            response.Filter = new IE9TableFixFilter(response.Filter,
                s => Regex.Replace(s, @"/td>\s+<td", "/td><td", RegexOptions.IgnoreCase));
        }
    }
}

Answer 3

除了清除空格之外，您可以尝试以下修复之一：

• CSS： td { white-space: nowrap; } td { white-space: nowrap; }如果适用！

• 强制您的表格具有固定的布局：

 <table style="table-layout: fixed" width="600"> <colgroup> <col width="100"><col width="300"><col width="200"> </colgroup> <tr height="20"> <td>...</td> <td>...</td> <td>...</td> </tr> </table> 

• 如果您的Web应用程序已经支持IE8，您可以强制IE9用户使用IE8渲染引擎： <meta http-equiv="X-UA-Compatible" content="IE=8" />