如何处理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 和 .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;
}

这里的大部分代码是abstract填充Stream. 重要的部分是该方法中发生了什么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();
}

更新

为了使过滤器属性更有效，您实际上可以将其应用于包含 user-agent 字符串的浏览器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));
        }
    }
}