【发布时间】:2020-04-11 07:11:58
【问题描述】:
对于一个学校项目,我们一直在开发一个使用时间表的网站,即使没有必要,我也想让它在所有浏览器上运行。当我在 Microsoft Edge 上打开页面时,我的“Thead”(表头)元素(如下所示)在其底部出现了一个巨大的空白。图片供参考;
左:Chrome 右:Microsoft Edge
.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 开发方面几乎没有经验。
我认为这与它没有任何关系,但我使用带有 asp.net MVC 的剃须刀页面。
** 使用新的 f12 结果进行更新。 Thead 元素上的所有活动样式(包括空格);
thead 元素的计算样式;
【问题讨论】:
-
你能把整个表格的代码贴出来吗?还有你在 DevTools 中看到的输出代码。
-
在开发者工具中使用 Inspect Element,看看是什么占用了所有的空间,也许它在继承一个不同的属性,比如 margin 什么的。
-
我用你的代码创建了一个示例,结果like this,看来一切正常。请尝试使用 F12 开发者工具检查 HTML 元素和 CSS 样式,表格元素是否包含正确的格式?是否有其他可能导致此问题的 CSS 样式?而且,您使用的是哪个版本的 Microsoft Edge 浏览器?尝试清除缓存并重新检查网页。如果仍然无法正常工作,您能否发布足够的代码来重现该问题?
-
我添加了更多计算 CSS 结果的截图,现在正在查看它们。感谢您的建议,我确实有一个更新等待,我将在今天晚些时候下载。清除缓存无效。
-
@coder,无法使用屏幕截图重现问题,您能否发布足够的代码(而不是屏幕截图)以重现问题,如Minimal, Complete, and Verifiable example,您也可以使用jsfiddle或者codepen,你也可以创建一个关于这部分的类似应用程序并分享相关代码。
标签: html css asp.net google-chrome microsoft-edge