不同的布局和字体大小在不同浏览器

问题描述：

.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。非常感谢大家的帮助！ –

答

你应该在你的CSS添加任何默认字体家族后，你可以看到在所有的浏览器相同的字体

和http://html5doctor.com/html-5-reset-stylesheet/在标题部分添加CSS复位！

谢谢。你能给我一个关于设置默认字体家族的例子吗？我想它应该在HTML {}？如果我想在其他部分使用其他字体？ –

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

答

每个网页浏览器都有不同的字体默认值，所以您想在添加自定义样式之前重置CSS。

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

答

问题的读取可以是通过不同的browers一些元素的初始值。最简单也是最可靠的解决方法是使用类似Normalize.css的东西。

答

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

不同的布局和字体大小在不同浏览器

相关推荐