VS2017 chrome（调试）和Google Chrome之间的前端设计区别

-1

我部署了本地版本并在谷歌浏览器上查看它，发现字体大小，元素位置和布局的差异。VS2017 chrome（调试）和Google Chrome之间的前端设计区别

示例：图像的左侧部分是在Windows 10上运行的Google Chrome，右侧部分是在调试项目时运行的内置Chrome。

CSS & JS是精缩在释放，但匹配的开发版本...

微软边缘看上去与谷歌浏览器（左部）

库：

"jQuery": "3.2.1", 
"bootstrap": "v4.0.0-alpha.6", 
"bootstrap-validator": "v0.11.9", 
"signalr": "v2.2.2", 
"cookie": "v1.2.2"

包括：

<environment names="Development"> 
    <link rel="stylesheet" href="~/lib/tether/dist/css/tether.css" /> 
    <link rel="stylesheet" href="~/lib/tether/dist/css/tether-theme-basic.css" /> 
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> 
    <link rel="stylesheet" href="~/css/site.css" /> 
</environment> 
<environment names="Staging,Production"> 
    <link rel="stylesheet" href="~/lib/tether/dist/css/tether.min.css" asp-append-version="true" /> 
    <link rel="stylesheet" href="~/lib/tether/dist/css/tether-theme-basic.min.css" asp-append-version="true" /> 
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-append-version="true" /> 
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> 
</environment>

适用的CSS代码字体家族（的site.css）：

body { 
    font-family: Georgia, "Times New Roman", Times, serif; 
    color: #555; 
}

检查我注意到，在开发版本的元素后，该元素的样式与bootstrap.css加载的边界。

但是，在发布版本中，边框缺失是因为CSS是从bootstrap/reboot.scss加载的。

仍在调查......

来源

2017-05-11 NullBy7e

不可能从图像中知道 – epascarello

@epascarello atleast为我提供了一种提高帖子质量的方法，而不仅仅是公然地downvoting和评论，说它不可能帮助（而且显然不是因为有人已经提供了我下面有可能的答案）。 – NullBy7e

正确答案就像评论中所说：“不可能从图像中知道”。不过我要试一下：

显然有很多东西是“关闭”的。

不同的字体，请参阅输入。
不同的填充，请参阅表格。
不同的标记，请参见水平线右图像（顶部的黑条）。

长话短说：它看起来像一个不同的样式表正在使用。

这使我相信不同的样式表被使用。所以你需要检查下一步。

您是否正在查看缓存版本？尝试将Chrome置入隐身模式，刷新缓存等...
预处理器是否正在运行，是否编译好了一切？（如果应用）
您的部署是否成功？您是否在部署（如果需要）上运行所需的预处理器？您是否在部署目标上执行了缓存破坏？

请检查页面并验证样式表匹配。

来源

2017-05-11 14:13:30

原来是引导程序和缓存之间的版本不匹配。 – NullBy7e

一般浏览器使用Arial,Times New Roman,Courier New，作为他们defualt字体。但是它可能会在其他操作系统上有所不同（例如，在Mac OS中，Chrome使用Helvetica而不是Arial）。

用户也可以更改默认的浏览器字体。

你使用任何特定的字体？检查您的字体家族，如果它没有使用标准字体，请确保您的字体文件在发布版本的网站中处于正确的路径。

来源

2017-05-11 13:29:18

字体应用于身体：'font-family：格鲁吉亚，“Times New Roman”，Times，serif;' – NullBy7e

我认为你的格鲁吉亚字体丢失或损坏，不知何故铬不能渲染它，所以它取代与下一个字体。尝试重新安装Georgia字体并重试。 –

我重新安装了格鲁吉亚字体，但没有骰子，我大声说出我的网站链接？如果是这样的话，可能会对诊断我的问题更有帮助。 – NullBy7e

VS2017 chrome（调试）和Google Chrome之间的前端设计区别

回答

相关问题