在IE中顯示CSS格式但不顯示Chrome或Firefox

這是一個難倒我，因爲我在本網站上搜索並搜索了類似的問題主題主題，但他們都沒有幫助我解決問題。在IE中顯示CSS格式但不顯示Chrome或Firefox

我有以下的HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sprout</title> 
    <link rel="stylesheet" type="text/css" href="./main.css"/> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

</head> 
<body> 
    <h1>Mysample</h1> 
    <div class="hero"> 
     <h2>Sprout.</h2> 
     <p>A book by J. Daniel Bedford</p> 
     <a href="#">Read now.</a> 
    </div> 
    <p>&copy; Mystwood Publishers Limited</p> 
</body> 
</html>

，並在我的main.css文件下面的CSS文件的代碼在同一目錄作爲我的HTML文件（C：\ HTML）

h1 { 
    font-family: Palatino, 'Palatino Linotype', serif; 
    color: blue; 
    font-size: 90px; 
} 

h2 { 
    font-size: 32px; 
}

當我在IE中打開代碼而不是在Chrome或Firefox中時，文本格式可以正常工作，但是我可能會錯過關於這兩種瀏覽器的問題嗎？

來源

2017-04-24 Caelaran

擺脫'。/'在'。/ main.css'中有什麼區別嗎？ –

我認爲格林姆是對的（在某些方面，我不明白） - 如果你將你的CSS移動到你的HTML文件中的Style部分，那麼所有主要瀏覽器都可以正常工作。這表明問題在於對鏈接css文件的引用。我從來沒有使用./ - 只有相對路徑，但它可能是不同的瀏覽器解釋它不同 - 嘗試使用絕對路徑開始... –

感謝您的答覆，不幸的是刪除「./」沒有幫助，它被建議作爲一個可能的解決方案在不同的線程中，而我從那個嘗試中得到了它。 – Caelaran

演示文稿（css）在不同的Web瀏覽器中可能會有所不同，因爲每個Web瀏覽器都有其自己的默認和用戶可配置設置。由於默認設置的差異，您將始終可以看到瀏覽器之間的差異。例如。在下面的屏幕截圖中，使用示例代碼可以看到，在我的計算機上，IE和其他瀏覽器顯示的頁面「或多或少」相同。

爲了使瀏覽器顯示相同的網頁「或多或少相同的」你需要與演示（字體，字體大小，顏色，背景顏色等）

相同的默認設置來配置他們每個人

要調試瀏覽器之間的渲染差異，您需要在每個瀏覽器（上面的屏幕截圖）中使用Dev工具的DOM Explorer選項卡，並比較應用的規則。

爲了進一步幫助我們，我們真的需要從您的計算機的屏幕截圖，並排顯示瀏覽器。正如你在我的電腦上看到的屏幕截圖所示，不同的瀏覽器顯示的頁面「差不多一樣」。這是因爲我已經爲我的所有測試瀏覽器配置了相同的用戶設置，用於顯示/輔助功能（文本大小，縮放，顏色，背景顏色，字體系列，鏈接和懸停顏色等）。

瀏覽器之間測試的最佳方式是使用https://www.browserstack.com/，因爲您使用的是供應商瀏覽器的虛擬實例，該瀏覽器具有「工廠」默認設置。在你自己的電腦上比較瀏覽器，你應該期望最好的結果是它們將顯示「差不多相同」的網頁，但不完全一樣。

要調試演示文稿，您需要使用瀏覽器開發工具的DOM Explorer選項卡。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sprout</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style type="text/css"> 
     h1 { 
      font-family: Palatino, 'Palatino Linotype', serif; 
      color: blue; 
      font-size: 90px; 
} 

h2 { 
    font-size: 32px; 
} 
    </style> 
</head> 
<body> 
    <h1>Mysample</h1> 
    <div class="hero"> 
     <h2>Sprout.</h2> 
     <p>A book by J. Daniel Bedford</p> 
     <a href="#">Read now.</a> 
    </div> 
    <p>&copy; Mystwood Publishers Limited</p> 
</body> 
</html>

來源

2017-04-24 20:28:53

修改我的瀏覽器以使用相同的默認值上面描述的工作！謝謝你的解決方案！ – Caelaran

這也困擾了我很長一段時間 - 頁在Edge \ IE11中看起來不錯，但不是Chrome或Firefox。最終發現HTML或CSS語法沒有錯。修復很簡單。該HTML文件使用UTF-16編碼。我將該文件覆蓋保存爲UTF-8。它現在可以在所有四種瀏覽器中正常工作。

來源

2017-08-01 12:56:00 StuKay

在IE中顯示CSS格式但不顯示Chrome或Firefox

回答

相關問題