CSS Reset是什麼? 能吃嗎?

标签: CSS | 发表时间:2011-07-22 06:40 | 作者:Jeffrey 達
出处:http://blog.darkthread.net/blogs/darkthreadtw/default.aspx

世上最遙遠的距離不是生與死,而是網頁在不同瀏覽器差了1個pixel,怎麼調都搞不定!

不少網頁設計人員應該都有過經驗,設計得好好的網頁,換個瀏覽器檢視,排版就出現問題。例如: 用<div>圖檔與背景圖擋的位置精算位移接合圖檔,在Firefox下密合得天衣無綘,但換到IE、Safari檢視,卻左右相差一個Pixel,甚至在IE的不同版本顯示結果也不盡相同,為了一個Pixel,調來調去調成仇,搞到設計人員想跳樓。

究其根源,在於各瀏覽器對元素預設位置設定有些微差異(但隨著大家對HTML/CSS統一標準愈來愈有共識,這問題在新版瀏覽器已沒有那麼嚴重了),造成呈現結果不同。用一個網頁來實證:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Reset</title>
    <style type="text/css">
        #main  
        {
            margin-top: 5px; margin-left: 5px;
            background-color: Green;
            width: 400px; height: 300px;
            color: Yellow;
        }
    </style>
</head>
<body style="background-image:url('bg.gif')">
<div id="main">
<p>Darkthread<br />黑暗執行緒</p>
</div>
</body>
</html>

分別用IE9(IE7相容模式)、IE9(IE9標準模式)、Chrome、Firefox檢視網頁,我故意用可突顯出Pixel位移的格子圖當成<body>背景,並在右側放上<div>左上角的500%放大圖。可以看到IE9(IE7相容)看到的<div>左上角在兩條綠色線交叉點的右方,而其餘瀏覽器則是在紅藍線交叉點的右方。由此實驗可驗證"網頁在不同瀏覽器下檢視結果可能會有排版位置上的差異,但在新版瀏覽器間已漸趨一致",關於新版瀏覽器這點,發現這個測試除了IE9(IE7相容)有差異外,其餘IE9(IE8相容)、IE9(IE9標準)、Firefox 5、Chrome 12、Opera 9、Safari 5下都已經一致(但針對其他的排版情境或瀏覽器用其他版本,還是可能存在顯示差異)。

為了解決這個問題,就有人提出CSS Reset的構想,透過一組CSS設定,先把網頁各元素的margin等預設值統統歸零,排除不同瀏覽器間的預設值差異,在做網頁排版設計時就比較不會踩到跨瀏覽器的地雷。至於該把哪些設定歸零,有人用現成的建議,也有人調配自己偏好的專屬設定,CSS-TRICKS在2008年曾做過一個迷你民調(只有13個樣本),27%的人選擇CSS 大師Eric A. Meyer建議的版本,有趣的是,第二高選項,有26%的人選擇"CSS Reset是什麼? 能吃嗎?";而近年來,陸續有一些CSS Framework開始流行,例如: Blueprint, 960 Grid System… 等等,也都會涵蓋CSS Reset的議題。不過,我自己程式寫得多、排版設計搞得少,也算CSS麻瓜一枚,無法再給更深入的剖析介紹,只能推薦一些參考文章: (如前述說明有謬誤之處,也請網頁設計高手出手指正)

針對先前的實驗,我們將Eric Meyer的CSS Reset設定存成default.css並在網頁中引用,套用後全部的瀏覽器顯示就一致囉!

CSS Reset可以解決瀏覽器的CSS預設值差異,不過對於沒使用過的設計人員來說,要花點時間適應。例如: 由於margin都預設為0px,原本元素左上角預設的留白會消失,現在必須額外加上保持美觀。另外,<ol>、<ul>被設定list-style: none;,因此<ol><li>A</li><li>B</li><li>C</li></ol>預設不會出現1, 2跳號數字,如有需要得特別加上CSS設定。雖然多了一些手續,但養成習慣後,應該不致造成困擾。

相关 [css reset] 推荐:

CSS Reset的历史(一)

- sprite.evan - 黑客志
当艺术家开始准备创作一幅新的画作时,他们不会先去拿镉红或是酞菁蓝的颜料,而是会首先准备好一张新的画布,为什么. 因为对于他们来说,首先需要确保新画布足够平展并且洁净. 许多Web设计师也喜欢使用CSS Reset来”准备“他们的浏览器画布,以确保他们的设计能够在不同的浏览器和系统下拥有同样的呈现. 这篇文章是关于CSS reset的系列文章的第一篇.

CSS Reset是什麼? 能吃嗎?

- 達 - 黑暗執行緒
世上最遙遠的距離不是生與死,而是網頁在不同瀏覽器差了1個pixel,怎麼調都搞不定. 不少網頁設計人員應該都有過經驗,設計得好好的網頁,換個瀏覽器檢視,排版就出現問題. 例如: 用
圖檔與背景圖擋的位置精算位移接合圖檔,在Firefox下密合得天衣無綘,但換到IE、Safari檢視,卻左右相差一個Pixel,甚至在IE的不同版本顯示結果也不盡相同,為了一個Pixel,調來調去調成仇,搞到設計人員想跳樓.

Eric Meyer又更新reset css了

- lostsnow - 走走停停看看
前几天Eric Meyer又思考了一下reset.css的问题,于是有所更新,具体为何要这样做,请看原文Reset Revisited.

为什么css 会使用重置 reset 样式

- - 收集分享互联网资源!
我们知道不同的浏览器客户端默认对css的解析会有区别,这种区别是内置到浏览器中的,也就是浏览器客户端会有其本身的一套css来解析默认的页面,如果 IE/Firefox/Chrome 每个版本的默认样式表都是一致的,那么我们的重置样式可以基于这些浏览器内置的样式,理论上将是不是渲染速度会更快一些呢. 实际情况可能并不是这样子,包括IE 他们的不同版本的默认css也是不一样的.如下:.

css reset重置样式有那么重要吗?

- - SegmentFault 最新的文章
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下:. 但是最近在网上看了看网络文章,也感觉有些重置是没有用的. CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准更多的就是“清零”. 有时候看到别人网站站的一些重置是这样的:. div{margin:0; padding:0;}属性呢.

select的最佳预设(reset)

- - 携程UED
    我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select.     我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况:height.100.padding.0、height.no.padding.100、no.height.no.padding,结果如  链接图片各浏览器DEMO外观.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.