不同的佈局和字體大小在不同瀏覽器

.header{ 
 
\t z-index:3; 
 
\t position:fixed; 
 
\t width:100%; 
 
\t height:10%; 
 
\t top:0px; 
 
\t background-color: white; 
 
} 
 

 
.header .header-bg { 
 
\t background-color: rgba(248,221,225,0.7); 
 
\t display:table; 
 
\t margin:auto; 
 
\t height:30px; 
 
\t width:30%; 
 
} 
 

 
.header .title-center{ 
 
\t text-decoration: underline; 
 
\t position:absolute; 
 
\t margin:0; 
 
\t left:50%; 
 
\t top:60%; 
 
    -ms-transform: translate(-50%, 0); 
 
    transform: translate(-50%, 0); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
\t <link rel="stylesheet" href="css/index.css"> 
 

 
\t <div class="header"> 
 
\t \t <div class="header-bg"> </div> 
 
\t \t <div class="title-center">header</div> 
 
\t </div> 
 
</body> 
 
</html>

當我開發了一個網頁，我測試了使用Chrome。完成後，我用firefox/IE/Edge進行了測試，發現字體大小比Chrome中的小得多。當我在Firefox上查看調試工具時，似乎firefox和chrome的相同div的大小並不相同。其實，差別很大。

更奇怪的是，當我點擊進入Chrome中的模式，並刷新窗口，路徑改爲index.html＃，那麼佈局和div大小几乎與其他瀏覽器相同。

任何人都知道爲什麼會發生這種情況？以及如何處理它？提前致謝！！

以下是我的頭部代碼的一部分。

來源

2016-07-28 Michelle Shieh

這通常是由不正在重置你的CSS，併爲您的整個文檔沒有設置起始字體大小引起的。 http://cssreset.com/what-is-a-css-reset/ – DirtyRedz

聽起來就像你剛剛在你的瀏覽器中改變了縮放級別。 – Quentin

呃...它確實有縮放級別。而縮放級別似乎只適用於我的網頁，因爲Chrome上的其他頁面的縮放級別爲100％。我也重置了CSS。非常感謝大家的幫助！ –

你應該在你的CSS添加任何默認字體家族後，你可以看到在所有的瀏覽器相同的字體

和http://html5doctor.com/html-5-reset-stylesheet/在標題部分添加CSS復位！

來源

2016-07-28 09:09:26

謝謝。你能給我一個關於設置默認字體家族的例子嗎？我想它應該在HTML {}？如果我想在其他部分使用其他字體？ –

是的，請看看http://www.w3schools.com/cssref/pr_font_font-family.asp –

每個網頁瀏覽器都有不同的字體默認值，所以您想在添加自定義樣式之前重置CSS。

具有http://cssreset.com/what-is-a-css-reset/

來源

2016-07-28 09:03:57

問題的讀取可以是通過不同的browers一些元素的初始值。最簡單也是最可靠的解決方法是使用類似Normalize.css的東西。

來源

2016-07-28 09:03:59

a）每個瀏覽器都會有自己的預設字體大小。

1）鉻：設置>顯示高級設置> Web內容>字體大小

2）對於Firefox：工具>選項>內容>字體顏色&

每當CSS沒有字體大小在他們的風格中提到，瀏覽器將使用他們預定義的默認字體大小在你的CSS中更好地定義字體大小。

b）index.html＃問題無論何時單擊任何可點擊的元素通常會錨定超鏈接，瀏覽器都會嘗試導航到該頁面或其中指向href =「」的部分。當超鏈接沒有href =「」時，我們將得到「＃」作爲虛擬指針。例如

<a href="#">Test link</a> or <a href="index.html"> Test link</a>

參見：https://developer.mozilla.org/en/docs/Web/HTML/Element/a

來源

2016-07-28 09:20:57 Selvam

不同的佈局和字體大小在不同瀏覽器

回答

相關問題