CSS Reset for Chrome

Question

Hi I realise what I should have done is start with a CSS reset but I developed my website in Chrome with its defaults and then started trying to make it cross browser compatible once I finished. If I add any of the common CSS resets I loose margins, text becomes smaller and in-line Span tags with backgrounds even overlap each other, everything is messed up.

So I guess what I'm looking for is a CSS reset, set to Chrome, that will make all other browsers look like my page does in Chrome. Is there anything like this or a way of doing it?

Answer 1

Found a solution to my own question for once. I just tried normalize.css from http://necolas.github.com/normalize.css/ and it keeps the useful modern styles and fixes insentiences with other browsers (ie. IE). Looks about the same on both Chrome and IE when using "IE9 document standards".

Answer 2

There is no css reset for a special browser. And that is exactly the thing, you want to reset the css to have in every browser the same starting position.

The problem you face is, that you haven't implemented the reset right away. You will have no other choice then do the additional amount of work to integrate the reset now and learn for your next project, that you start with the reset and build your css based on that.

Answer 3

I've always use Eric Meyers css reset snippet. I actually like it more than the one included in html5 boilerplate.

/* 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;
}

Answer 4

Recently, Firefox 27 has added a new CSS3 property and defaulting keywords.

You can now, in Firefox 27+ reset the entire page with:

* { all: unset !important; }

That's a hammer approach. You can be much more refined as well.

blockquote, option { margin:unset; }
a { text-decoration: initial; }

etc.

Answer 5

You may want to take a look at http://html5boilerplate.com/, it has structure and CSS for most modern browsers.

Cheers

Iain

Answer 6

According to this post:

Browsers' default CSS for HTML elements

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css is the CSS used by Chrome. I haven't tested it though so try it out and see if it works.