本文主要包含浏览器,默认样式等相关知识,佚名 希望在学习及工作中可以帮助到您
不同的浏览器对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的文件中单独引用（推荐这种做法）：
为了尽可能从开始就减少问题的产生，鸟们需要在开始写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的文件中单独引用（推荐这种做法）：