I'm now developing my site and was considering FireFox as the main testing zone, but while I tested it on Chrome and IE9 the results were different. On Chrome one of the layers doesn't sit in its place once I open the page but once I refresh it fits exactly where I want it to be. Strange? While on IE one of the divs (the left one) appears to have a higher margin to the left making it too far from the other divs and the font is different which makes some of the words bigger and doesn't fit in the borders. What's the best idea to make my sire looks good on all browsers and which browser should I consider my main testing zone.
P.S: Why people are voting down for my question? We're all learning.
First off,
You should use a reset / normalize script in your css. A good one is Eric Meyers's.
Include this at the beginning of your stylesheet.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Without seeing the code cant say exactly, but you have missed best practices while develop. You should have check the side while developing in IE and other browser scope, then you could have fixed them while rising.
- Check your document type.
- re-set elements
- Identify IE box model issue.
you should use something like boilerplate to start every project or just use some css reset.
That way those minor differences btw browsers (paddings, margins etc etc) can be fixed.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
...
more at: http://meyerweb.com/eric/tools/css/reset/
About the browsers you should test at the most important ones... In a long term (week by week) i test in some minor relevante browsers just to make sure its works as well.
来源：https://stackoverflow.com/questions/16646729/why-my-site-doesnt-look-good-on-other-browsers