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之間的前端設計區別

回答

相關問題