注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易邮箱前端技术中心

汇聚最新最劲爆的前端技术

 
 
 

日志

 
 
 
 

看看哪些元素在reset.css里被矫枉过正了许多年  

2013-09-26 14:31:16|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这个时代变化快,每天都会多一点最潮最前沿的资讯,但是今天我们来翻点儿陈芝麻烂谷子,聊聊这个也许你已经知道,也许你从没留意,也许你已经习惯“拿来主义”的话题,reset css中一个小小的存在——标签的浏览器默认边距。

每一个网站项目的开端,css样式表总是从reset这一步开始,“全世界人民”都知道,浏览器对标签的默认渲染效果是不符合我们的审美和预期的,我们不从外貌协会的角度讨论它存在的意义,只上到下好好打量一下它的外形。

“全世界人民”也都知道,Yahoo这个业界巨人提出的YUI中有非常经典“传唱”多年的YUI reset CSS,如今她已经进化到第三代,打开文件,最开头的部分依然有一条长长毛毛虫一样的样式表对基础常用的的dom标签进行了批处理,把marginpadding统统置为0

虽说我们都清楚明白,简单敷衍了事的写了下面一行代码的人都应该被关进小黑屋:

* { margin: 0; padding: 0;}

但是,像YUI那样列队处理了一遍也未必就是明智之举呢。

 

我们来看看浏览器对这些常用元素默认渲染的真实情况吧~

以下是在chrome中的渲染情况,firefox的情况和它几乎如出一辙,IE6一贯的比较另类,但也只是在有margin或者padding的元素上,数值大小略有不同罢了。 

bodymargin:8px;

divmargin:0; padding:0;

pmargin:1em 0; padding:0;

formmargin:0; padding:0;

inputmargin:0; padding:0;

h1margin:0.67em 0; padding:0;

h2margin:0.83em 0; padding:0;

h3margin:1em 0; padding:0;

h4margin:1.33em 0; padding:0;

h5margin:1.67em 0; padding:0;

h6margin:2.33e 0m; padding:0;

tablemargin:0; padding:0; 

thmargin:0; padding:0;

tdmargin:0; padding:0;

fieldsetmargin:0 2px; padding:0.35em 0.75em 0.625em 0.75em;

dlmargin:1em 0; padding:0;

dtmargin:0; padding:0;

ddmargin-left:40px; padding:0;

ul/olmargin:1em 0; padding-left:40px;

limargin:0; padding:0;

premargin:1em 0; padding:0;

textareamargin:2px; padding:2px;

codemargin:0; padding:0;

blockquotemargin:1em 40px; padding:0; 

 请注意那些高亮的marginpadding值,看看哪些元素是被矫枉过正许多年的。

那些“从没留意”或者“拿来主义”的你是不是会小小感叹,原来它、它、它、它们,都是没有padding的哇,连margin也不是人人都有份呢。所以说,是不是把那句reset简写成以下,就已经可以解决我们的问题了:

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,pre,textarea,fieldset,blockquote{ margin:0; }

ul,ol{ padding-left:0; }

 

BUT,惰性上来的我并没有对所有浏览器进行彻底的排查,这只能算是个不完全报告。只是想提出一点小小小小的改进建议,还有一点希望,权威不可不信,也不可全信哟。统统回炉重造的做法,是安全可靠的下策,但有时候我们需要一点优雅的改变。

如果各位愿意逐一尝试那些高端大气上档次或者低端粗俗甩节操的浏览器们的表现,欢迎反馈给我们哦~


by Cloud
  评论这张
 
阅读(935)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017