best practice for CSS : Display same font size in all browser.
There is a cross browser problem with css regarding font size. each browser display font size differently. To overcome this issue. You should declare standard font size say 14px in your body code in css like this:
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
}
Now you take 14 px; as relative to define font size for other tags in your css like:
If you want to have 18px font then declare like this
.post .title a {
font-size: 1.125em; /* 18px/16=1.125em Here em is 1.125 times the 14px of body font size*/
color: #618C04;
}
Now your page will almost look similar in all browsers. and zoom in and zoom out will work effectively.
If you use font-size: 100%; in body tag then it may still arise problem because each browser has different default font size.
- Vinod K
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
}
Now you take 14 px; as relative to define font size for other tags in your css like:
If you want to have 18px font then declare like this
.post .title a {
font-size: 1.125em; /* 18px/16=1.125em Here em is 1.125 times the 14px of body font size*/
color: #618C04;
}
Now your page will almost look similar in all browsers. and zoom in and zoom out will work effectively.
If you use font-size: 100%; in body tag then it may still arise problem because each browser has different default font size.
- Vinod K
Comments
web design company