Question

.header{
	z-index:3;
	position:fixed;
	width:100%;
	height:10%;
	top:0px;
	background-color: white;
}

.header .header-bg {
	background-color: rgba(248,221,225,0.7);
	display:table;
	margin:auto;
	height:30px;
	width:30%;
}

.header .title-center{
	text-decoration: underline;
	position:absolute;
	margin:0;
	left:50%;
	top:60%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
</head>
<body>
	<link rel="stylesheet" href="css/index.css">

	<div class="header"> 
		<div class="header-bg"> </div>
		<div class="title-center">header</div>
	</div>
</body>
</html>

当我开发网页时，我使用Chrome进行了测试。完成后，我用firefox / IE / Edge测试它，发现字体大小比以前在Chrome中要小得多。当我在Firefox上检查调试工具时，似乎相同div的大小对于firefox和chrome来说是不一样的。实际上，差异很大。

更奇怪的是，当我点击chrome中的模态并刷新窗口时，路径更改为index.html＃，然后，布局和div大小几乎与其他浏览器相同。

任何人都知道为什么会这样？以及如何处理它？在此先感谢!!

以下是我的标题代码的一部分。

Answer 1

每个网络浏览器都有不同的字体默认值，因此您希望在添加自定义样式之前重置CSS。

阅读http://cssreset.com/what-is-a-css-reset/

Answer 2

问题可能是通过浏览器而有所不同的某些元素的初始值。解决问题的最简单，最可靠的方法是使用类似Normalize.css的内容。

Answer 3

您应该在css中添加任何默认字体系列，之后您可以在所有浏览器上看到相同的字体

并在标题部分的http://html5doctor.com/html-5-reset-stylesheet/添加重置css！

Answer 4

a）每个浏览器都有自己的预定义默认字体大小。

1）对于铬：设置＆gt;显示高级设置＆gt;网页内容＆gt;字体大小

2）对于Firefox：工具＆gt;选项＆gt;内容＆gt;字体＆amp;颜色

每当CSS没有在其样式中提到字体大小时，浏览器将使用其预定义的默认字体大小。更好地在CSS中定义字体大小。

b）index.html＃issue 每当您点击任何可点击的元素时，通常会锚定超链接，浏览器会尝试导航到该页面或部分，其中href =＆＃34;＆＃34;如果指点。当超链接没有href =＆＃34;＆＃34;我们得到＆＃34;＃＆＃34;作为虚拟指针。实施例

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

参考：https://developer.mozilla.org/en/docs/Web/HTML/Element/a

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

4 个答案: