不同的浏览器对CSS的兼容问题在学习及运用过程中占到了绝大部分。作为一个闭门造车的学鸟~偶是一路google+baidu过来的，虽然到现在还是鸟~但还是要慢慢总结。
为了尽可能从开始就减少问题的产生，鸟们需要在开始写CSS的时候就把各个不同的浏览器样式重置到一个样子~以减少后面打补丁的数量和降低问题产生的可能性。要知道，有时候分析问题产生的根源比解决问题所花费的时间要多的多得多。关于如何快速定位页面中复杂的css bug 的问题，请参阅怿飞的这篇文章
不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}；
不过现在说的可不只是这些。基本上，不同内核的两个浏览器在某些元素的表现都会存在差异，比如缩进的大小、字体选择、字符样式等。也许一个很 漂亮的CSS样式表在一个浏览器上表现良好，在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来，我都是浏览器默认样式在作怪。
因此，我们在生成CSS样式规则的时候，一个必做的步骤就是重设浏览器的默认样式，也就是覆盖掉浏览器的默认样式。和使用 * {padding:0;margin:0}有所不同，并不是所有的元素都存在padding和margin的差异（元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它们的缩进采用了margin缩进和padding缩进）。例如下面这段代码：
＜h1＞ Headlines are very important Elements in XHTML＜/h1＞
这段代码在Internet Explorer中使用的字体是Times New Roman，而在Firefox和Opera中使用的是系统默认字体。因此我们要为＜h1＞在CSS中设定一个统一的样式。
但是，如果我们像使用* {padding:0;margin:0}一样去使用通配符“*”来简单地设定全局样式，那么一个很明显的问题就会出现，比如像form元素、input 元素、textarea等在某些浏览器中会忽略对它们的重新设定，更重要的是这将会严重破坏这些元素的外观，所以你又不得不去手动去一一为它们重新设定一 个padding值和margin值。所以我们应该放弃简单地使用“*”，而是为第一个存在表现不一致的元素进行重设，如 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。
同时，元素的默认样式可能会破坏页面的外观。比如＜b＞元素会把文字加粗，＜blockquote＞会大段缩进，＜em＞会使文字倾斜等，如果你想要求页 面文本外观一致的话，也应该在CSS中把这些元素的外观进行重设。同时，有时候我们要求这些元素的外观和父元素一样，可以直接使用 inherit从父元素继承即可。
至于哪些元素应该被重设？Yahoo!已经为我们做了比较出的总结。根据雅虎的建议，你需要把这些规则放到一个名为Reset.css的文件中单独引用（推荐这种做法）：
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { border:0;
}
你要做的就是把这些规则简单地保存到reset.css中，然后在页面中使用。在需要给这些元素增加新的样式的时候，和其它元素的设定没有什么不同。
注意：上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以认识，这样的设定是为了使在Internet Explorer中可以缩放表单控件字体的大小。而 legend{color:#000;} 是因为在Internet Explorer中lengend元素使用字体颜色和系统有关（甚至和系统风格有关）。这里还要指出的 是，html{color:#000;background:#FFF;} 这条规则虽是细节，却很重要，因为在某些时候他直接影响了页面的整体外观，百度就存在这样的设计失误（雅虎没似乎也没有给这一条，但是在某个示例中似乎出 现了）。
和Yahoo!一样，Eric Meyer在他的网站也给出了一个新的写法：
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
PS:在做网站时，遇到这样的问题。各个浏览器兼容的问题，单写好CSS不行，还得对其进行初始化，这样，在各个浏览器上运行页面才不会变形。本人正研究中，希望有经验的朋友也给我指教一下。。
/*初始化页面*/
* { margin:0; padding:0; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html {overflow:-moz-scrollbars-vertical;}
/*将gridview的边框看不见*/
table td{
border:none;
}
【重置浏览器默认样式】相关文章：
★ CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
★ CSS屏蔽Webkit浏览器input高亮和textarea缩放