专业的 CSS Resets

关于CSS Resets,或许大家都知道,目的是为了兼容个浏览器。不说别的上代码

<code>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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  
  margin: 0;  
  padding: 0;  
  border: 0;  
  font-size: 100%;  
  font: inherit;  
  vertical-align: baselinebaseline;  
  outline: none;  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}  
html { height: 101%; }  
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }  
  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }  
ol, ul { list-style: none; }  
  
blockquote, q { quotes: none; }  
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }  
strong { font-weight: bold; }   
  
table { border-collapse: collapse; border-spacing: 0; }  
img { border: 0; max-width: 100%; }  
  
p { font-size: 1.2em; line-height: 1.0em; color: #333; }  </code>

专业的清楚浮动

清除浮动?clear:both这个简单,但是未必这么简单

<code>.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
.clearfix { display: inline-block; }  
   
html[xmlns] .clearfix { display: block; }  
* html .clearfix { height: 1%; }  </code>

固定footer?fixed?好像是

<code>#footer {  
    position: fixed;  
    left: 0px;  
    bottom: 0px;  
    height: 30px;  
    width: 100%;  
    background: #444;  
}  
   
/* IE 6 */  
* html #footer {  
    position: absolute;  
    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');  
}  </code>

0 thoughts on “专业的 CSS Resets
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。