html - different layout&font-size in different browser -


.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>

when developed web page, tested using chrome. after finishing, tested firefox/ie/edge, , found font-size smaller used in chrome. when checked debug tool on firefox, seemed size of same div not same firefox , chrome. actually, difference great.

more wierd, when click modal in chrome, , refresh window, path changed index.html#, then, layout , div size same other browsers.

anyone has idea why happened? , how deal it? in advance!!

the following part of code header.

you should add default font-family in css after can see same fonts on browser

and add reset css http://html5doctor.com/html-5-reset-stylesheet/ in header section!


Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -