不同的浏览器对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;
CSS 字体大小教程 - 如何在 HTML 中更改文本大小
你可以使用 CSS 的 font-size属性来确定文本的大小。
.container {
font-size: 33px;
}
这个属性的值可以是多种类型：
.container {
font-size: xx-large;
}
问题是：你应该选择哪种类型的值，为什么？
这就是本文要解决的问题。它将向你展示如何使用 font-size 属性，以及它的许多值之间的差异。因此，下次你需要更改文本的字体大小时，你就知道要使用什么值。
关键字值
有两种类型的关键字值可以与字体大小一起使用：absolute-size 绝对大小和 relative-size 相对大小关键字。
绝对大小关键字
下面的代码使用 absolute-size 关键字 small 来调整 HTML 文本的大小。
.childElement {
font-size: small;
}
有更多绝对大小关键字选项可供选择：
absolute-size 关键字的值由浏览器的默认字体大小决定。通常，这个值是 medium。
相对大小关键字
相对大小的关键字是另一个要考虑的关键字选项。你有两种选择：smaller 和 larger。
.parentElement {
font-size: smaller;
}
带有 relative-size 关键字的元素的字体大小与其父元素的字体大小相关——更大或更小。
换句话说，父元素的字体大小会影响子元素的字体大小，如下所示。
在这个例子中，相对大小值 smaller 应用于子元素，而绝对大小值 large 应用于父元素。
长度值
font-size 接受几个不同的长度值。我们将探讨其中的三个：像素（px）以及 em 和 rem 单位。不管你如何选择，你使用的长度值必须为正值。
.parentElement {
font-size: 60px;
}
像素
像素是绝对长度单位。这意味着，它们不受其他元素的影响，例如父元素或窗口大小。
因此，像素是精确的：你定义元素上所需的确切像素数，这通常就是你得到的。但是，浏览器之间可能存在细微差别。
请注意，子元素使用像素并在上面的代码示例中具有相同的字体大小。
EMs
像素可以被视为是固定的，而 em 则可被视为是可变的。
那是因为 em 值是一个相对长度单位。使用 em 值的元素的字体大小与其父元素的字体大小有关。
但是，假设你尚未为父元素设置字体大小，你也没有在 DOM 中更高层级的其他地方设置一个，在这种情况下，em 值是使用浏览器的默认值（通常为 16px）计算的。
让我们把这个想法具体化。
假设父元素设置为 30px，子元素设置为 2em。 然后，子元素的渲染字体大小为 60px（2 x 30px = 60px）。你可以在下面的代码中看到这种情况。
由于它们的复合效应，em 值可能会出现问题，这在以下示例中得到了证明。
当你有多个使用 em 值相互嵌套的元素时，字体大小值会复合：它们变得越来越大。这就是复合效应。
REMs
输入 rem 值，创建这些值是为了处理 em 的复合问题。
回想一下 em 值是相对于父元素的。相反，rem 值与根（html）元素的字体大小有关。
这意味着你可以将 rem 值应用于元素，并且不会受到父元素字体大小的影响。这避免了上面的复合效应。
此示例使用带有 rem 值的 font-size 属性。
这是上面例子的一个关键点：父元素的字体大小不会影响子元素的字体大小。
百分比
百分比提供了另一种设置相对于父元素字体的字体大小的方法。
带有百分比的元素根据其父元素来确定其字体大小。百分比的值必须为正。
这是一个例子。
如你所见，在字体大小方面，你有很多选择可以满足需求。
我在 amymhaddad.com 上写了关于学习编程以及最佳方法的文章。我还发布了有关编程、学习和生产力的推文：@amymhaddad。
原文：CSS Font Size Tutorial – How to Change Text Size in HTML，作者：Amy Haddad
