html - Microsoft Edge 显示空白，而 chrome/Internet Explorer 不显示

Question

对于一个学校元素，我们一直在使用一个使用时间表的网站，尽管这不是必需的，但我想让它适用于所有浏览器。当我在 Microsoft Edge 上打开页面时，我的“Thead”(表头)元素(如下所示)在其底部出现了一个巨大的空白。图片供引用；

左:Chrome 右:Microsoft Edge

这是这部分使用的 CSS。

.fixed_header thead tr {
    display: block;
    width: 100%;
}

.fixed_header thead {
    color: #fff;
    width: 100%;
}

这是出错的 CShtml 部分。

   <thead>
        <tr>
            <th><a>Week: @(ViewData["weeks"])</a></th>
            @{string[] days = { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" };}

            @for (int i = 0; i < days.Length; i++)
            {
        <th>
            @(days[i]) <a >@Html.Action("ReturnDateOfWeek", "Application", new { year = DateTime.Now.Year, weekOfYear = ViewData["weeks"], DayOfWeek = i }) </a>
        </th>
            }
        </tr>
    </thead>

我搜索了整个文档，但没有人添加任何额外内容。这些是 Thead 仅有的两个定义。我试图改变所有的值，但没有任何改变。我也使用“Tbody”标签，效果也很好。任何帮助将不胜感激，因为我在 Web 开发方面几乎没有经验。

我不认为这与它有任何关系，但我将 razor 页面与 asp.net MVC 一起使用。

** 更新了新的 f12 结果。Thead 元素上的所有样式(包括空白)；

thead 元素的计算样式；

Answer 1

你的循环看起来像是在弄乱 HTML.. 似乎要关闭两次，例如，而不是在每一行上关闭该行。

应该是:

<thead>
 <tr>
   <th>
    Stuff here
   </th>
 </tr>

 <tr>
   <th>
     Another Row
   </th>
 </tr>
</thead>