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
Post a Comment