.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大小几乎与其他浏览器相同。
任何人都知道为什么会发生这种情况?以及如何处理它?提前致谢!!
以下是我的头部代码的一部分。
这通常是由不正在重置你的CSS,并为您的整个文档没有设置起始字体大小引起的。 http://cssreset.com/what-is-a-css-reset/ – DirtyRedz
听起来就像你刚刚在你的浏览器中改变了缩放级别。 – Quentin
呃...它确实有缩放级别。而缩放级别似乎只适用于我的网页,因为Chrome上的其他页面的缩放级别为100%。我也重置了CSS。非常感谢大家的帮助! –