Font appears bigger in IE8 and IE9
Question
I don't understand why the fonts are bigger in IE8 and IE9. I am using Helvetica font. All other browsers are okay. I got problem only in IE8 and IE9. The line-height is also bigger. I cannot post the Link to my site here for some reason. But it's really simple use of css. Here is how my HTML header looks:
<!DOCTYPE html>
<html lang="se">
<head>
<meta charset="utf-8">
<title>Digi...</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="/resources/layout/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
3 answers
solution1
0 ACCPTED 2014-07-18 13:19:01
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE like:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets is YUI .
see this: http://yuilibrary.com/yui/docs/cssreset/
solution2
0 2014-07-18 13:26:07
Yes IE change the way he read the css or the styling from one version to another. In general its only the distance calculation that change. So all the padding/margin. line-heigh etc. The same way that when you look at a website in chrome,firefox,saferie,ie the website isn't exactly the same.
If the problems is really important for you (normally I ajust the css so that even with the difference the website) you can use CSS Conditionnal comment like this :
<!--[if IE 7]><html lang="en" class="ie ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
If you use css:
.ie8 body {
//IE 8 CSS
}
.ie9 body {
//IE 9 CSS
}
Or use the tag on you're meta tag
<!--[if IE 8]><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.8, minimum-scale=0.8, maximum-scale=0.8"><![endif]-->
(or change the scale to whatever you want) do the same for IE 9.
Edit:
Sorry @Tasos and @user3830694 I was slow to write the post and saw that you provided similar answer by the time I was finished :P
solution3
0 2014-07-18 14:32:23
Try modernizr. It will try to normalize the CSS styling between different browsers.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.