重置浏览器默认样式

当前位置 : 首页 > 网页制作 > CSS > 重置浏览器默认样式

重置浏览器默认样式

来源: 作者: 时间:2015-11-26 19:21
作为一个半路出家的的csser,偶深深滴理解小鸟们滴郁闷之处。其中最让鸟头大的就是相同的CSS在不同的浏览器下表现出不同滴鸟样儿。
作为一个半路出家的的csser,偶深深滴理解小鸟们滴郁闷之处。其中最让鸟头大的就是相同的CSS在不同的浏览器下表现出不同滴鸟样儿。
不同的浏览器对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;
}
Tag:
网友评论

<